mirror of
https://github.com/Steffo99/trivia.git
synced 2024-12-22 07:24:19 +00:00
First commit
This commit is contained in:
commit
076931acc1
8 changed files with 282 additions and 0 deletions
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
.idea/
|
||||||
0
.nojekyll
Normal file
0
.nojekyll
Normal file
3
README.md
Normal file
3
README.md
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
# Trivia
|
||||||
|
|
||||||
|
A tiny
|
||||||
36
index.html
Normal file
36
index.html
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="it">
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="author" content="Stefano Pigozzi">
|
||||||
|
<meta name="keywords" content="Trivia">
|
||||||
|
<meta name="description" content="A trivia question displayer">
|
||||||
|
<meta property="og:site_name" content="Trivia">
|
||||||
|
<title>
|
||||||
|
Trivia
|
||||||
|
</title>
|
||||||
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300" rel="stylesheet" type="text/css">
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="card">
|
||||||
|
<div id="question">
|
||||||
|
Premi un tasto per cominciare!
|
||||||
|
</div>
|
||||||
|
<div class="a letter" id="letter-0"><span class="text">A</span></div>
|
||||||
|
<div class="a answer" id="answer-0"><span class="text"></span></div>
|
||||||
|
<div class="b letter" id="letter-1"><span class="text">B</span></div>
|
||||||
|
<div class="b answer" id="answer-1"><span class="text"></span></div>
|
||||||
|
<div class="c letter" id="letter-2"><span class="text">C</span></div>
|
||||||
|
<div class="c answer" id="answer-2"><span class="text"></span></div>
|
||||||
|
<div class="d letter" id="letter-3"><span class="text">D</span></div>
|
||||||
|
<div class="d answer" id="answer-3"><span class="text"></span></div>
|
||||||
|
</div>
|
||||||
|
<div class="footer">
|
||||||
|
All questions are sourced from the <a href="https://opentdb.com/">Open Trivia Database</a> by <a href="https://www.pixeltailgames.com">Pixeltail Games</a>, licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a>.
|
||||||
|
</div>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
48
script.js
Normal file
48
script.js
Normal file
|
|
@ -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();
|
||||||
|
}
|
||||||
|
};
|
||||||
84
style.css
Normal file
84
style.css
Normal file
|
|
@ -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 */
|
||||||
1
style.css.map
Normal file
1
style.css.map
Normal file
|
|
@ -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"}
|
||||||
109
style.less
Normal file
109
style.less
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue