Initial commit

2025-02-15 23:41:22 +01:00
commit 628428dd38
7 changed files with 1393 additions and 0 deletions
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width,initial-scale=1.0">
+        <title>Quiz</title>
+        <style>
+            body {
+                border: solid 1px;
+                border-radius: 2rem;
+                margin: 1rem;
+                padding: 2rem;
+            }
+            ul {
+                list-style-type: none;
+                padding-left: 0px;
+            }
+
+            li {
+                white-space: pre;
+                padding: 0.5em;
+                margin-bottom: 0.5em;
+                background-color: lightblue;
+            }
+
+            ul.ready li {
+                border: 1px solid;
+            }
+
+            ul.voted li {
+                border: 1px dotted;
+            } 
+
+            li.choice {
+                font-weight: bold;
+            }
+
+            li.winner {
+                background-color: lightgreen;
+            }
+
+            #nonetwork {
+                position: fixed;
+                width: 100%;
+                height: 100%;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <svg id="nonetwork" fill="#000000" width="800px" height="800px" viewBox="0 0 36 36" version="1.1"  preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+            <title>no-wifi-line</title>
+            <path class="clr-i-outline clr-i-outline-path-1" d="M18,24.42a4,4,0,1,0,4,4A4,4,0,0,0,18,24.42Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,18,30.42Z"></path><path class="clr-i-outline clr-i-outline-path-2" d="M26.21,21.85a1,1,0,0,0-.23-1.4,13.56,13.56,0,0,0-5-2.23l3.87,3.87A1,1,0,0,0,26.21,21.85Z"></path><path class="clr-i-outline clr-i-outline-path-3" d="M18.05,10.72a20.88,20.88,0,0,0-4.16.43l1.74,1.74a19,19,0,0,1,2.42-.17A18.76,18.76,0,0,1,28.64,16a1,1,0,0,0,1.12-1.65A20.75,20.75,0,0,0,18.05,10.72Z"></path><path class="clr-i-outline clr-i-outline-path-4" d="M33.55,8.2A28.11,28.11,0,0,0,8.11,5.36L9.69,6.93A26,26,0,0,1,32.45,9.87a1,1,0,0,0,1.1-1.67Z"></path><path class="clr-i-outline clr-i-outline-path-5" d="M1.84,4.75,4.27,7.18c-.62.34-1.23.7-1.83,1.1A1,1,0,1,0,3.56,9.94C4.26,9.47,5,9,5.74,8.65l3.87,3.87A20.59,20.59,0,0,0,6.23,14.4,1,1,0,0,0,7.36,16a18.82,18.82,0,0,1,3.77-2l4.16,4.16A13.51,13.51,0,0,0,10,20.55a1,1,0,0,0,1.18,1.61A11.52,11.52,0,0,1,17,20l10.8,10.8,1.41-1.41-26-26Z"></path>
+            <rect x="0" y="0" width="36" height="36" fill-opacity="0"/>
+        </svg>
+        <div id="question">Waiting...</div>
+        <ul id="choices">
+        </ul>
+    </body>
+    <script src="/socket.io/socket.io.js"></script>
+    <script>
+        const socket = io();
+
+        const nonetwork = document.getElementById("nonetwork");
+        const choice_buttons = document.getElementById("choices");
+        const question = document.getElementById("question");
+        let choices = [];
+
+        let voted = false;
+
+        function vote(idx) {
+            voted = true;
+            console.log(`voting ${idx}`);
+            socket.emit('vote', idx);
+            choice_buttons.className = 'voted';
+        }
+
+        socket.on('disconnect', () => {
+            nonetwork.style.display = 'block';
+        })
+
+        socket.on('choices', (new_choices, new_question) => {
+            console.log(`new question ${new_question}: ${new_choices}`);
+
+            choices = new_choices;
+            voted = false;
+            choice_buttons.className = 'ready';
+            nonetwork.style.display = 'none';
+            question.textContent = new_question;
+
+            choice_buttons.replaceChildren(...choices.map((txt,idx) => {
+                const li = document.createElement('li');
+                li.textContent = txt
+                li.addEventListener('click', () => {
+                    if (voted) { return; }
+                    vote(idx+1)
+                    li.className = 'choice';
+                });
+                return li;
+            }))
+
+            if (window.location.hash === '#abstain') {
+                vote(0);
+            }
+        }); 
+        
+        socket.on('results', (results) => {
+
+            console.log(`results: ${results}`);
+
+            const sum = results.reduce((a,b) => a+b);
+            console.log(`sum is ${sum}`);
+            const max = Math.max(...results);
+            results.map((score, idx) => {
+            
+                const li = choice_buttons.children[idx];
+                const width = Math.round(100 * score / sum);
+                console.log(`set ${idx} to ${width}`);
+                li.style.width = `${width}%`;
+                li.textContent = `${choices[idx]} : ${score}`;
+                if (score === max) {
+                    li.classList.add('winner');
+                } else {
+                    li.classList.remove('winner');
+                }
+                
+                //bar.setAttribute("max", sum);
+                //bar.setAttribute("value", score);
+            });
+
+        })
+        
+    </script>
+</html>