136 lines
4.9 KiB
HTML
136 lines
4.9 KiB
HTML
<!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> |