mirror of
https://github.com/Steffo99/trivia.git
synced 2024-10-16 09:37:27 +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