Brad Traversy
4 years ago
parent
e4fdaa7654
commit
9a25d6022f
@ -0,0 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<title>Quiz App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="quiz-container" id="quiz">
|
||||
<div class="quiz-header">
|
||||
<h2 id="question">Question text</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<input type="radio" name="answer" id="a" class="answer">
|
||||
<label for="a" id="a_text">Question</label>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<input type="radio" name="answer" id="b" class="answer">
|
||||
<label for="b" id="b_text">Question</label>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<input type="radio" name="answer" id="c" class="answer">
|
||||
<label for="c" id="c_text">Question</label>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<input type="radio" name="answer" id="d" class="answer">
|
||||
<label for="d" id="d_text">Question</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button id="submit">Submit</button>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,98 @@
|
||||
const quizData = [
|
||||
{
|
||||
question: "Which language runs in a web browser?",
|
||||
a: "Java",
|
||||
b: "C",
|
||||
c: "Python",
|
||||
d: "JavaScript",
|
||||
correct: "d",
|
||||
},
|
||||
{
|
||||
question: "What does CSS stand for?",
|
||||
a: "Central Style Sheets",
|
||||
b: "Cascading Style Sheets",
|
||||
c: "Cascading Simple Sheets",
|
||||
d: "Cars SUVs Sailboats",
|
||||
correct: "b",
|
||||
},
|
||||
{
|
||||
question: "What does HTML stand for?",
|
||||
a: "Hypertext Markup Language",
|
||||
b: "Hypertext Markdown Language",
|
||||
c: "Hyperloop Machine Language",
|
||||
d: "Helicopters Terminals Motorboats Lamborginis",
|
||||
correct: "a",
|
||||
},
|
||||
{
|
||||
question: "What year was JavaScript launched?",
|
||||
a: "1996",
|
||||
b: "1995",
|
||||
c: "1994",
|
||||
d: "none of the above",
|
||||
correct: "b",
|
||||
},
|
||||
];
|
||||
|
||||
const quiz = document.getElementById('quiz')
|
||||
const answerEls = document.querySelectorAll('.answer')
|
||||
const questionEl = document.getElementById('question')
|
||||
const a_text = document.getElementById('a_text')
|
||||
const b_text = document.getElementById('b_text')
|
||||
const c_text = document.getElementById('c_text')
|
||||
const d_text = document.getElementById('d_text')
|
||||
const submitBtn = document.getElementById('submit')
|
||||
|
||||
let currentQuiz = 0
|
||||
let score = 0
|
||||
|
||||
loadQuiz()
|
||||
|
||||
function loadQuiz() {
|
||||
deselectAnswers()
|
||||
|
||||
const currentQuizData = quizData[currentQuiz]
|
||||
|
||||
questionEl.innerText = currentQuizData.question
|
||||
a_text.innerText = currentQuizData.a
|
||||
b_text.innerText = currentQuizData.b
|
||||
c_text.innerText = currentQuizData.c
|
||||
d_text.innerText = currentQuizData.d
|
||||
}
|
||||
|
||||
function deselectAnswers() {
|
||||
answerEls.forEach(answerEl => answerEl.checked = false)
|
||||
}
|
||||
|
||||
function getSelected() {
|
||||
let answer
|
||||
|
||||
answerEls.forEach(answerEl => {
|
||||
if(answerEl.checked) {
|
||||
answer = answerEl.id
|
||||
}
|
||||
})
|
||||
|
||||
return answer
|
||||
}
|
||||
|
||||
submitBtn.addEventListener('click', () => {
|
||||
const answer = getSelected()
|
||||
|
||||
if(answer) {
|
||||
if(answer === quizData[currentQuiz].correct) {
|
||||
score++
|
||||
}
|
||||
|
||||
currentQuiz++
|
||||
|
||||
if(currentQuiz < quizData.length) {
|
||||
loadQuiz()
|
||||
} else {
|
||||
quiz.innerHTML = `
|
||||
<h2>You answered ${score}/${quizData.length} questions correctly</h2>
|
||||
|
||||
<button onclick="location.reload()">Reload</button>
|
||||
`
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,70 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #b8c6db;
|
||||
background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 100%);
|
||||
font-family: 'Poppins', sans-serif;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.quiz-container {
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1);
|
||||
width: 600px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.quiz-header {
|
||||
padding: 4rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
font-size: 1.2rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
ul li label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #8e44ad;
|
||||
color: #fff;
|
||||
border: none;
|
||||
display: block;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
font-size: 1.1rem;
|
||||
font-family: inherit;
|
||||
padding: 1.3rem;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #732d91;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: none;
|
||||
background-color: #5e3370;
|
||||
}
|
||||
Loading…
Reference in new issue