From 076931acc1f39b1fe4473c09676d975c8da8b642 Mon Sep 17 00:00:00 2001 From: Stefano Pigozzi Date: Wed, 14 Aug 2019 19:51:10 +0200 Subject: [PATCH] First commit --- .gitignore | 1 + .nojekyll | 0 README.md | 3 ++ index.html | 36 +++++++++++++++++ script.js | 48 ++++++++++++++++++++++ style.css | 84 ++++++++++++++++++++++++++++++++++++++ style.css.map | 1 + style.less | 109 ++++++++++++++++++++++++++++++++++++++++++++++++++ 8 files changed, 282 insertions(+) create mode 100644 .gitignore create mode 100644 .nojekyll create mode 100644 README.md create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css create mode 100644 style.css.map create mode 100644 style.less diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..9f11b75 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.idea/ diff --git a/.nojekyll b/.nojekyll new file mode 100644 index 0000000..e69de29 diff --git a/README.md b/README.md new file mode 100644 index 0000000..865c8da --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# Trivia + +A tiny \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..e5aca19 --- /dev/null +++ b/index.html @@ -0,0 +1,36 @@ + + + + + + + + + + + + Trivia + + + + + + +
+
+ Premi un tasto per cominciare! +
+
A
+
+
B
+
+
C
+
+
D
+
+
+
+ All questions are sourced from the Open Trivia Database by Pixeltail Games, licensed under CC BY-SA 4.0. +
+ + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..8ffbcd2 --- /dev/null +++ b/script.js @@ -0,0 +1,48 @@ +const questionElement = document.getElementById("question"); +let correctAnswerNumber = null; + +async function fetchQuestion() { + r = await fetch("https://opentdb.com/api.php?amount=1&type=multiple"); + j = await r.json(); + d = j["results"][0]; + questionElement.innerHTML = d["question"]; + correctAnswerNumber = Math.floor(Math.random() * 4); + for(let i = 0; i < 4; i++) { + if(i === correctAnswerNumber) { + document.getElementById("answer-" + String(i)).innerHTML = d["correct_answer"]; + } + else { + document.getElementById("answer-" + String(i)).innerHTML = d["incorrect_answers"].pop(); + } + } +} + +function colorAnswers() { + for(let i = 0; i < 4; i++) { + if(i === correctAnswerNumber) { + document.getElementById("answer-" + String(i)).className += " correct"; + } + else { + document.getElementById("answer-" + String(i)).className += " incorrect"; + } + } + correctAnswerNumber = null; +} + +function cleanup() { + for(let i = 0; i < 4; i++) { + let answerElement = document.getElementById("answer-" + String(i)); + answerElement.className = answerElement.className.replace(" correct", ""); + answerElement.className = answerElement.className.replace(" incorrect", ""); + } +} + +document.onkeypress = async function(e) { + if(correctAnswerNumber == null) { + await fetchQuestion(); + await cleanup(); + } + else { + await colorAnswers(); + } +}; \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..5fc05ba --- /dev/null +++ b/style.css @@ -0,0 +1,84 @@ +body { + background-color: #262a35; +} +.card { + display: grid; + background-color: #383e4e; + border-radius: 16px; + padding: 16px; + grid-row-gap: 8px; + grid-template-columns: 24px auto; + grid-column-gap: 8px; + font-family: "Source Sans Pro", sans-serif; + color: white; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75); +} +#question { + grid-row: 1; + grid-column-start: 1; + grid-column-end: 3; + align-items: center; + font-size: xx-large; +} +.letter { + grid-column: 1; + font-size: larger; + border-radius: 12px; + width: 24px; + height: 24px; + text-align: center; +} +.letter .text { + text-shadow: none; + color: #383e4e; + font-family: "Arial", sans-serif; +} +.letter.a { + background-color: #188ff3; +} +.letter.b { + background-color: #f37a18; +} +.letter.c { + background-color: #e118f3; +} +.letter.d { + background-color: #18f384; +} +.text { + margin: auto; +} +.answer { + grid-column: 2; + font-size: larger; +} +.answer.correct { + color: #0f0; +} +.answer.incorrect { + color: #f00; +} +.a { + grid-row: 2; +} +.b { + grid-row: 3; +} +.c { + grid-row: 4; +} +.d { + grid-row: 5; +} +.footer { + position: fixed; + bottom: 0; + color: #424961; + font-size: smaller; + font-family: "Arial", sans-serif; + padding: 16px; +} +.footer a { + color: #424961; +} +/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/style.css.map b/style.css.map new file mode 100644 index 0000000..fe94acc --- /dev/null +++ b/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.less"],"names":[],"mappings":"AAQA;EACI,yBAAA;;AAGJ;EACI,aAAA;EACA,yBAAA;EACA,mBAAA;EACA,aAAA;EACA,iBAAA;EACA,gCAAA;EACA,oBAAA;EACA,aAAa,6BAAb;EACA,YAAA;EACA,4CAAA;;AAGJ;EACI,WAAA;EACA,oBAAA;EACA,kBAAA;EACA,mBAAA;EACA,mBAAA;;AAGJ;EACI,cAAA;EACA,iBAAA;EACA,mBAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;;AANJ,OAQI;EACI,iBAAA;EACA,cAAA;EACA,aAAa,mBAAb;;AAGJ,OAAC;EACG,yBAAA;;AAGJ,OAAC;EACG,yBAAA;;AAGJ,OAAC;EACG,yBAAA;;AAGJ,OAAC;EACG,yBAAA;;AAIR;EACI,YAAA;;AAGJ;EACI,cAAA;EACA,iBAAA;;AAEA,OAAC;EACG,WAAA;;AAGJ,OAAC;EACG,WAAA;;AAIR;EACI,WAAA;;AAGJ;EACI,WAAA;;AAGJ;EACI,WAAA;;AAGJ;EACI,WAAA;;AAGJ;EACI,eAAA;EACA,SAAA;EACA,cAAA;EACA,kBAAA;EACA,aAAa,mBAAb;EACA,aAAA;;AANJ,OAQI;EACI,cAAA","file":"style.css"} \ No newline at end of file diff --git a/style.less b/style.less new file mode 100644 index 0000000..0c5570c --- /dev/null +++ b/style.less @@ -0,0 +1,109 @@ +@dark: #262a35; +@light: #383e4e; +@lighter: #424961; +@blue: #188ff3; +@orange: #f37a18; +@purple: #e118f3; +@green: #18f384; + +body { + background-color: @dark; +} + +.card { + display: grid; + background-color: @light; + border-radius: 16px; + padding: 16px; + grid-row-gap: 8px; + grid-template-columns: 24px auto; + grid-column-gap: 8px; + font-family: "Source Sans Pro", sans-serif; + color: white; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75); +} + +#question { + grid-row: 1; + grid-column-start: 1; + grid-column-end: 3; + align-items: center; + font-size: xx-large; +} + +.letter { + grid-column: 1; + font-size: larger; + border-radius: 12px; + width: 24px; + height: 24px; + text-align: center; + + .text { + text-shadow: none; + color: @light; + font-family: "Arial", sans-serif; + } + + &.a { + background-color: @blue; + } + + &.b { + background-color: @orange; + } + + &.c { + background-color: @purple; + } + + &.d { + background-color: @green; + } +} + +.text { + margin: auto; +} + +.answer { + grid-column: 2; + font-size: larger; + + &.correct { + color: #0f0; + } + + &.incorrect { + color: #f00; + } +} + +.a { + grid-row: 2; +} + +.b { + grid-row: 3; +} + +.c { + grid-row: 4; +} + +.d { + grid-row: 5; +} + +.footer { + position: fixed; + bottom: 0; + color: @lighter; + font-size: smaller; + font-family: "Arial", sans-serif; + padding: 16px; + + a { + color: @lighter; + } +} \ No newline at end of file