<!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;
socket.emit('vote', idx);
choice_buttons.className = 'voted';
}
socket.on('disconnect', () => {
nonetwork.style.display = 'block';
})
socket.on('choices', (new_choices, new_question) => {
console.log(`Received 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(`Received results: ${results}`);
const sum = results.reduce((a,b) => a+b);
const max = Math.max(...results);
results.map((score, idx) => {
const li = choice_buttons.children[idx];
const width = Math.round(100 * score / sum);
li.style.width = `${width}%`;
li.textContent = `${choices[idx]} : ${score}`;
if (score === max) {
li.classList.add('winner');
} else {
li.classList.remove('winner');
}
});
})
</script>
</html>