diff --git a/static/survey.css b/static/survey.css new file mode 100644 index 00000000..0ec2bc23 --- /dev/null +++ b/static/survey.css @@ -0,0 +1,59 @@ +:root { + --card-radius: 6px; +} + +body { + color: white; + background-color: #111820; + font-family: Arial, Helvetica, sans-serif +} + +.hidden { + display: none; +} + +#prompt-container { + border: 2px solid #36485e; + border-radius: 8px; + background-color: #273141; + padding: 5px; + padding-top: 1.5em; +} + +#prompt-container>.loopy-label { + position: absolute; + top: 0em; + background-color: #273141; + padding: 0px 3px; + border-top: 2px solid #36485e; +} + +#question { + text-align: center; +} + +.choice { + font-size: 1.2em; + background-color: #273141; + padding: 10px 5px; + margin-bottom: 3px; + cursor: pointer; +} + +.meta-choice { + font-style: italic; +} + +.meta-choice>.choice-text { + opacity: 0.5; +} + +.choice:first-child { + border-top-left-radius: var(--card-radius); + border-top-right-radius: var(--card-radius); +} + +.choice:last-child { + border-bottom-left-radius: var(--card-radius); + border-bottom-right-radius: var(--card-radius); +} \ No newline at end of file diff --git a/static/survey.js b/static/survey.js new file mode 100644 index 00000000..982e51e7 --- /dev/null +++ b/static/survey.js @@ -0,0 +1,25 @@ +function $el(selector) { return document.querySelector(selector) } + +var socket = io.connect(window.location.origin, { transports: ['polling', 'websocket'], closeOnBeforeunload: false }); +var question = $el("#question").value; + +function send_results() { + var answer = ""; + + for (const answerId of ["A", "B", "C", "D", "E", "F"]) { + let checkbox = document.querySelector(`[answer="${answerId}"]`).querySelector("input"); + if (checkbox.checked) { + answer = answerId; + break; + } + } + + console.log(answer); + socket.emit("answer", { "question": question, "answer": answer, "id": document.getElementById("id").value }); +} + +for (const child of $el("#choices-container").children) { + let radioButton = child.querySelector("input"); + child.addEventListener("click", function () { radioButton.click() }); + radioButton.addEventListener("click", send_results); +} \ No newline at end of file diff --git a/templates/survey.html b/templates/survey.html index a72a6b42..78a0766a 100644 --- a/templates/survey.html +++ b/templates/survey.html @@ -2,93 +2,51 @@ - + + -
- Prompt:
+
+ Prompt Niko the kobold stalked carefully down the alley, his small scaly figure obscured by a dusky cloak that fluttered lightly in the cold winter breeze. Holding up his tail to keep it from dragging in the dirty snow that covered the cobblestone, he waited patiently for the butcher to turn his attention from his stall so that he could pilfer his next meal: a tender-looking chicken. He crouched just slightly as he neared the stall to ensure that no one was watching, not that anyone would be dumb enough to hassle a small kobold. What else was there for a lowly kobold to do in a city? All that Niko needed to know was where to find the chicken and then how to make off with it. A soft thud caused Niko to quickly lift his head. Standing behind the stall where the butcher had been cutting his chicken,
-
-
-

{{ question }}

-
+ +

{{ question }}

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - {{ a }} -
- - - {{ b }} -
 
- - - About the same -
- - - The first is incoherent -
- - - The second is incoherent -
- - - Both the first and second are incoherent -
+ +
+
+ + {{ a }} +
+ +
+ + {{ b }} +
+ +
+ + Both choices are about the same +
+ +
+ + The first choice is incoherent +
+ +
+ + The second choice is incoherent +
+ +
+ + Both choices are incoherent +
+
+ \ No newline at end of file