+ Trivia +

commit 076931acc1f39b1fe4473c09676d975c8da8b642 Author: Stefano Pigozzi Date: Wed Aug 14 19:51:10 2019 +0200 First commit 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! +

+ + + \ 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