From 40a80383984274309b825821f11381815593902b Mon Sep 17 00:00:00 2001
From: Jonas Leder <git@jonasled.de>
Date: Wed, 5 May 2021 15:56:33 +0200
Subject: [PATCH] add multiple question types
---
package.json | 4 +-
src/allQuestions.html | 13 +++++
src/js/allQuestions.js | 7 +++
src/js/lightbox.js | 67 ++++++++++++++++++++++++--
src/js/questions.js | 92 ++++++++++++++++++++++++++++++------
src/js/script.js | 63 ++++++++++++++++++++++--
src/scss/_answer.scss | 17 +++++++
src/scss/_questionInput.scss | 10 ++++
src/scss/_taskText.scss | 3 ++
src/scss/style.scss | 3 ++
10 files changed, 254 insertions(+), 25 deletions(-)
create mode 100644 src/allQuestions.html
create mode 100644 src/js/allQuestions.js
create mode 100644 src/scss/_answer.scss
create mode 100644 src/scss/_questionInput.scss
create mode 100644 src/scss/_taskText.scss
diff --git a/package.json b/package.json
index 2797d5a..eefef8c 100644
--- a/package.json
+++ b/package.json
@@ -8,8 +8,8 @@
"parcel-bundler": "^1.12.5"
},
"scripts": {
- "start": "parcel ./src/index.html",
- "build": "parcel build ./src/index.html"
+ "start": "parcel ./src/*.html",
+ "build": "parcel build ./src/*.html"
},
"devDependencies": {
"sass": "^1.32.12"
diff --git a/src/allQuestions.html b/src/allQuestions.html
new file mode 100644
index 0000000..0946a2e
--- /dev/null
+++ b/src/allQuestions.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Document</title>
+</head>
+<body>
+
+</body>
+<script src="js/allQuestions.js"></script>
+</html>
\ No newline at end of file
diff --git a/src/js/allQuestions.js b/src/js/allQuestions.js
new file mode 100644
index 0000000..658a983
--- /dev/null
+++ b/src/js/allQuestions.js
@@ -0,0 +1,7 @@
+require("./questions");
+
+Object.keys(questions).forEach(element => {
+ let p = document.createElement("p");
+ p.innerText = window.location.origin + "/?q=" + element;
+ document.body.appendChild(p);
+});
\ No newline at end of file
diff --git a/src/js/lightbox.js b/src/js/lightbox.js
index 85a1cf9..73e4506 100644
--- a/src/js/lightbox.js
+++ b/src/js/lightbox.js
@@ -1,6 +1,63 @@
-getLightbox = (question) => {
- return `
- <div class="question">
- <p>${question}</p>
- `;
+require("./questions")
+
+getLightbox = (questionID) => {
+ const question = questions[questionID]
+
+ switch(question.type){
+ case 1:
+ return `
+ <div class="question">
+ <p>${question.question}<br>
+ <span class="taskText">${question.task}</span>
+ </p>
+ </div>
+ `;
+
+ case 2:
+ return `
+ <div class="question">
+ <p>${question.question}<br>
+ <input id="solutionInput">
+ </p>
+ </div>
+ `;
+
+ case 3:
+ return `
+ <div class="question">
+ <p>${question.question}</p>
+ </div>
+ `;
+ case 4:
+ return `
+ <div class="question">
+ <p>${question.question}<br>
+ <input id="solutionInput">
+ </p>
+ </div>
+ `;
+ case 5:
+ return `
+ <div class="question">
+ <p>${question.question}<br>
+ <input id="solutionInput">
+ </p>
+ </div>
+ `;
+
+
+ case 6:
+ return `
+ <div class="question">
+ <p class="wrong">${question.question}</p>
+ </div>
+ `;
+ case 7:
+ return `
+ <div class="question">
+ <p class="right">${question.question}</p>
+ </div>
+ `;
+
+ }
}
\ No newline at end of file
diff --git a/src/js/questions.js b/src/js/questions.js
index 8394bc7..e5883fc 100644
--- a/src/js/questions.js
+++ b/src/js/questions.js
@@ -1,17 +1,81 @@
questions = {
- "592BF": "Der Wuerfel muss fuenf oder acht ergeben, sonst musst du ewig im Dschungel leben.",
- "ecyXF": "Du hast 10 Sekunden Zeit. Schaffst du es eine 5 oder 8 zu wuerfeln, dann gehe 2 Felder vor. Ansonsten gehe 3 Felder zurueck.",
- "X5ZpP": "Seine Faenge sind scharf, er mag euren Geschmack. Zieht lieber schnell weiter, jetzt aber zack, zack - Loewe",
- "wrESc": "Sie wachsen viel schneller als der Bambusstrauch. Gib Acht, sonst jagen sie dich auch. – fleischfressende Pflanzen",
- "KDeaB": "Ein kleiner Stich koennte dich jucken, bringt dich zum Niesen, bringt dich zum Zucken. – Moskito",
- "MRLBL": "Dies wird keine leichte Mission - Affen behindern die Expedition. – Gehe drei Felder zurueck.",
- "NEcfM": "Sie fliegen nachts, eile bei Zeiten, diese gefluegelten Dinge, nicht viel Freude bereiten. – Fledermaus",
- "9deKT": "Pass auf, du verlierst deinen festen Stand! Der Boden fließt schneller noch als Sand. – Treibsand",
- "QPYXW": "Eine Regel von Jumanji wurde verletzt, Du wirst um einen Zug zurueckversetzt",
- "FhLbh": "Es gibt eine Lektion, die sollst du verstehen: Du musst manchmal einen Zug rueckwaertsgehen",
- "pg4NK": "Fehlt dir eine helfende Hand? Gib Acht, wir haben Acht davon mitgebracht – Spinnen",
- "grUQQ": "Halte durch, du darfst nicht wanken, gleich faengt der Boden an zu schwanken – Erdbeben",
- "W8c7G": "Der Viertelmond laesst dich nicht ruhn, in deine Lagune treibt er den Monsun. – Flut, Ueberchwemmung oder Krokodil",
- "wHxXc": "Noch ein letztes Wort? - Jumanji"
+ "592BF": {
+ "question": "Der Wuerfel muss fuenf oder acht ergeben, sonst musst du ewig im Dschungel leben.",
+ "task": "Du hast 10 Sekunden Zeit. Schaffst du es eine 5 oder 8 zu wuerfeln, dann gehe 2 Felder vor. Ansonsten gehe 3 Felder zurueck.",
+ "type": 1
+ },
+ "X5ZpP": {
+ "question": "Seine Faenge sind scharf, er mag euren Geschmack. Zieht lieber schnell weiter, jetzt aber zack, zack",
+ "answer": "Löwe",
+ "type": 2
+ },
+ "wrESc": {
+ "question": "Sie wachsen viel schneller als der Bambusstrauch. Gib Acht, sonst jagen sie dich auch.",
+ "answer": "fleischfressende Pflanzen",
+ "type": 2
+ },
+ "KDeaB": {
+ "question": "Ein kleiner Stich koennte dich jucken, bringt dich zum Niesen, bringt dich zum Zucken.",
+ "answer": "Moskito",
+ "type": 2
+ },
+ "MRLBL": {
+ "question": "Dies wird keine leichte Mission - Affen behindern die Expedition. – Gehe drei Felder zurueck.",
+ "type": 3
+ },
+ "NEcfM": {
+ "question": "Sie fliegen nachts, eile bei Zeiten, diese gefluegelten Dinge, nicht viel Freude bereiten.",
+ "answer": "Fledermaus",
+ "type": 2
+ },
+ "9deKT": {
+ "question": "Pass auf, du verlierst deinen festen Stand! Der Boden fließt schneller noch als Sand.",
+ "answer": "Treibsand",
+ "type": 2
+ },
+ "QPYXW": {
+ "question": "Eine Regel von Jumanji wurde verletzt, Du wirst um einen Zug zurueckversetzt",
+ "type": 3
+ },
+ "FhLbh": {
+ "question": "Es gibt eine Lektion, die sollst du verstehen: Du musst manchmal einen Zug rueckwaertsgehen",
+ "type": 3
+ },
+ "pg4NK": {
+ "question": "Fehlt dir eine helfende Hand? Gib Acht, wir haben Acht davon mitgebracht",
+ "answer": "Spinnen",
+ "type": 2
+ },
+ "grUQQ": {
+ "question": "Halte durch, du darfst nicht wanken, gleich faengt der Boden an zu schwanken",
+ "answer": "Erdbeben",
+ "type": 2
+ },
+ "W8c7G": {
+ "question": "Der Viertelmond laesst dich nicht ruhn, in deine Lagune treibt er den Monsun.",
+ "answer": [
+ "Flut",
+ "Ãœberschwemmung",
+ "Krokodil"
+ ],
+ "type": 4
+ },
+ "wHxXc": {
+ "question": "Noch ein letztes Wort?",
+ "answer": "Jumanji",
+ "type": 5
+ },
+ "false": {
+ "question": "Falsch, gehe 3 Felder zurueck.",
+ "type": 6
+ },
+ "true": {
+ "question": "Richtig, gehe 1 Feld weiter.",
+ "type": 7
+ },
+ "final": {
+ "question": "Ihr habt das Spiel besiegt und euch fur das naechste Level qualifiziert: <span class='normalFont'><a target='_blank' href='https://coord.info/GC5QZ0C'>GC5QZ0C</a> am 27.6. um 9.30 Uhr.</span>",
+ "type": 7
+ }
}
diff --git a/src/js/script.js b/src/js/script.js
index e6c0a2a..1aeb04f 100644
--- a/src/js/script.js
+++ b/src/js/script.js
@@ -14,13 +14,68 @@ document.querySelector(".buttonJumanji img").onclick = () => {
return;
}
- const questionText = questions[questionName];
- if(questionText == undefined) {
+ const question = questions[questionName];
+ if(question == undefined) {
alert("Frage nicht gefunden");
return;
}
- console.log(questionText);
- const instance = basicLightbox.create(getLightbox(questionText));
+ console.log(question.question);
+ const instance = basicLightbox.create(getLightbox(questionName));
instance.show();
+
+ const inputElement = document.querySelector("#solutionInput");
+ switch(question.type) {
+ case 2:
+ inputElement.onkeyup = (e) => {
+ if(e.key == "Enter") {
+ instance.close();
+ const insertedText = inputElement.value.toLowerCase();
+ const solution = question.answer.toLowerCase();
+
+ if(insertedText != solution) {
+ const instance = basicLightbox.create(getLightbox("false"));
+ instance.show();
+ } else {
+ const instance = basicLightbox.create(getLightbox("true"));
+ instance.show();
+ }
+ }
+ }
+ case 4:
+ inputElement.onkeyup = (e) => {
+ if(e.key == "Enter") {
+ instance.close();
+ const insertedText = inputElement.value.toLowerCase();
+ const solution = [];
+ question.answer.forEach(element => {
+ solution.push(element.toLowerCase())
+ });
+
+ if(solution.indexOf(insertedText) == -1) {
+ const instance = basicLightbox.create(getLightbox("false"));
+ instance.show();
+ } else {
+ const instance = basicLightbox.create(getLightbox("true"));
+ instance.show();
+ }
+ }
+ }
+ case 5:
+ inputElement.onkeyup = (e) => {
+ if(e.key == "Enter") {
+ instance.close();
+ const insertedText = inputElement.value.toLowerCase();
+ const solution = question.answer.toLowerCase();
+
+ if(insertedText != solution) {
+ const instance = basicLightbox.create(getLightbox("false"));
+ instance.show();
+ } else {
+ const instance = basicLightbox.create(getLightbox("final"));
+ instance.show();
+ }
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/src/scss/_answer.scss b/src/scss/_answer.scss
new file mode 100644
index 0000000..ea25251
--- /dev/null
+++ b/src/scss/_answer.scss
@@ -0,0 +1,17 @@
+.wrong {
+ color: red !important;
+}
+
+.right {
+ color: #2b8618 !important;
+}
+
+.normalFont {
+ font-family: sans-serif;
+ font-size: 30px;
+
+ a {
+ text-decoration: underline;
+ color: unset;
+ }
+}
\ No newline at end of file
diff --git a/src/scss/_questionInput.scss b/src/scss/_questionInput.scss
new file mode 100644
index 0000000..52eca17
--- /dev/null
+++ b/src/scss/_questionInput.scss
@@ -0,0 +1,10 @@
+#solutionInput {
+ font-family: "JurassicPark";
+ font-size: 30px;
+ background-color: rgba($color: #fff, $alpha: 0.3);
+
+ outline: none;
+ border: 3px solid #D4A03B;
+ border-radius: 3px;
+ padding: 2px;
+}
\ No newline at end of file
diff --git a/src/scss/_taskText.scss b/src/scss/_taskText.scss
new file mode 100644
index 0000000..78d57b8
--- /dev/null
+++ b/src/scss/_taskText.scss
@@ -0,0 +1,3 @@
+.taskText {
+ font-size: 30px;
+}
\ No newline at end of file
diff --git a/src/scss/style.scss b/src/scss/style.scss
index fc14c18..4afdd39 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -5,6 +5,9 @@
@import "buttonJumanji";
@import "question";
@import "keyframes";
+ @import "taskText";
+ @import "questionInput";
+ @import "answer";
}
@media screen and (orientation: portrait) {
--
GitLab