Codeday Workshop

CodeDay HTML/CSS/JS
Workshop
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Interactive Quiz</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="quiz-container">
<img src="/assets/codeday-notext-color.png" alt="CodeDay logo" width="100px">
<h3>CodeDay Interactive Quiz</h3>
<div class="question-container">
<h1 id="question">Question goes here</h1>
<div class="options-container">
<button class="option">Option 1</button>
</div>
<button class="btn" id="submit-btn">Submit</button>
</div>
<div class="result-container hidden">

<h2>You scored <span id="score"></span> out of <span id="total"></span>!</h2>
<button class="btn" id="restart-btn">Restart Quiz</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
The HTML structure starts with the <!DOCTYPE html> declaration, indicating an
HTML5 document.
The <html> tags enclose the entire HTML content.
CodeDay HTML/CSS/JS Workshop 1

The <head> section contains metadata and external resources. Here, it includes the
title of the page and a link to the external CSS file.
The <body> section contains the visible content of the page.
Inside the body, there is a main container div with the class quiz-container .
Within the quiz-container , there's an image element for the CodeDay logo and an
<h3> heading for the quiz title.
The quiz questions and options are contained within the question-container div.
The question is displayed inside an <h1> element with the id "question".
The options are displayed inside a div with the class options-container , containing
four <button> elements with the class "option".
At the bottom of the question container, there's a submit button with the id "submit-
btn".
The result container is initially hidden and contains the score and a restart button.
The result container has the class "result-container" and contains an <h2> element
to display the score, as well as a restart button with the id "restart-btn".
Finally, the <script> tag at the end of the body links the JavaScript file, "script.js", to
the HTML.
CSS:
body {
display: grid;
place-items: center;
height: 100vh;
margin: 0;
}
.quiz-container {
max-width: 500px;
text-align: center;
padding: 20px;
}
h1 {
color: #333;
}
.question-container {

margin-bottom: 20px;
}
.options-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-bottom: 20px;
}
.option {
padding: 10px;
background-color: #eee;
border: none;
cursor: pointer;
}
.option:hover {
background-color: #ccc;
}
.checked {
background-color: #bada55;
}
.checked:hover {
background-color: #bada55;
}
.btn {
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #555;
}
.result-container {
font-weight: bold;
margin-top: 20px;
}
.hidden {
display: none;
}
The CSS code provides the styling for various elements in the HTML.

The body selector sets the display to a grid and centers the content vertically and
horizontally. The height: 100vh; ensures that the grid takes up the full height of the
viewport.
The .quiz-container class sets the maximum width of the quiz container to 500
pixels and centers the text within it.
The h1 selector sets the color of all <h1> elements to #333.
The .question-container class adds a margin at the bottom of the question container.
The .options-container class utilizes grid layout to display the answer options in a
grid with two columns. The gap property adds a 10-pixel gap between the options.
The .option class defines the styling for each option button, including padding,
background color, and cursor behavior.
The .option:hover selector changes the background color of an option button when
hovering over it.
The .checked and .checked:hover classes define the styles for the selected option
button.
The .btn class sets the styles for the submit and restart buttons, including padding,
background color, and cursor behavior. The transition property adds a smooth
transition effect when hovering over the buttons.
The .btn:hover selector changes the background color of a button when hovering
over it.
The .result-container class sets the font weight to bold and adds a margin at the
top.
The .hidden class is used to hide elements by setting their display property to
"none".
JavaScript:
// Quiz data
const quizData = [
{
question: "What is the capital city of Ethiopia?",
options: ["Addis Ababa", "Nairobi", "Kampala", "Dar es Salaam"],
correctAnswer: 0,
},

{
question: "In which region of Ethiopia is Lalibela located?",
options: ["Tigray", "Amhara", "Oromia", "Somali"],
correctAnswer: 1,
},
// Add more questions and options as needed
];
// Get HTML elements

const questionContainer = document.querySelector(".question-container");
const questionElement = document.querySelector("#question");
const optionsElements = document.querySelectorAll(".option");
const submitButton = document.querySelector("#submit-btn");
const resultContainer = document.querySelector(".result-container");

const restartButton = document.querySelector("#restart-btn");
const scoreElement = document.querySelector("#score");
const totalElement = document.querySelector("#total");
let score = 0;
let currentQuestion = 0;
// Load question and options

function loadQuestion() {
const currentQuiz = quizData[currentQuestion];
questionElement.textContent = currentQuiz.question;
optionsElements.forEach((option, index) => {

option.textContent = currentQuiz.options[index];
option.dataset.answer = index;
});
}
optionsElements.forEach((option) => {
option.addEventListener("click", (e) => {
optionsElements.forEach((option) => {
option.classList.remove("checked");
});
option.classList.add("checked");
});
});
// Check answer and update score

function checkAnswer() {
const selectedOption = document.querySelector("button.option.checked");
if (!selectedOption) return;
const selectedAnswer = Number(selectedOption.dataset.answer);
if (selectedAnswer === quizData[currentQuestion].correctAnswer) {

score++;
}

currentQuestion++;
selectedOption.classList.remove("checked");
if (currentQuestion < quizData.length) {

loadQuestion();
} else {
showResult();
}
}
// Show result
function showResult() {
questionContainer.classList.add("hidden");
resultContainer.classList.remove("hidden");
scoreElement.textContent = score;
totalElement.textContent = quizData.length;
restartButton.addEventListener("click", () => {
questionContainer.classList.remove("hidden");
resultContainer.classList.add("hidden");
score = 0;
currentQuestion = 0;
loadQuestion();
});
}
// Event listener for submit button click

submitButton.addEventListener("click", checkAnswer);
// Load initial question

loadQuestion();
The JavaScript code begins by defining the quiz data as an array of objects. Each
object represents a question and its corresponding options and correct answer.
The querySelector and querySelectorAll methods are used to obtain references to

various HTML elements based on their classes and IDs.
The loadQuestion function is responsible for dynamically populating the question

and answer options based on the current question index.
Inside loadQuestion , the current question is accessed from the quizData array using
the currentQuestion index.
The question is then set as the text content of the questionElement .

The answer options are iterated through using a forEach loop. Each option button's
text content is set based on the corresponding option in the currentQuiz object, and
a data-answer attribute is assigned to each button to keep track of the selected
answer.
Another forEach loop is used to attach click event listeners to each option button.
When an option is clicked, the checked class is removed from all options, and then
added only to the clicked option.
The checkAnswer function is called when the submit button is clicked. It first checks if
an option has been selected by querying for the button with the class option and
checked . If no option is selected, the function returns early.
The selected answer is obtained from the data-answer attribute of the selected
option button and converted to a number using Number() .
If the selected answer matches the correct answer for the current question, the
score variable is incremented.
The currentQuestion index is incremented, and the checked class is removed from
the selected option button.
If there are more questions remaining, loadQuestion is called to load the next
question. Otherwise, the showResult function is called to display the final score.
The showResult function hides the question container and shows the result
container. It sets the text content of the scoreElement to the current score and the
totalElement to the total number of questions.
An event listener is added to the restart button to reset the quiz when clicked. It
removes the hidden class from the question container and adds it to the result
container. Additionally, the score and currentQuestion variables are reset, and
loadQuestion is called to load the initial question.
Finally, an event listener is added to the submit button to call the checkAnswer
function when clicked, and the initial question is loaded using loadQuestion .

Codeday Workshop

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Codeday Workshop

Uploaded by

Copyright:

Available Formats

CodeDay HTML/CSS/JS

<div class="result-container hidden">

The <html> tags enclose the entire HTML content.

CodeDay HTML/CSS/JS Workshop 1

The <body> section contains the visible content of the page.

The question is displayed inside an <h1> element with the id "question".

CodeDay HTML/CSS/JS Workshop 2

CodeDay HTML/CSS/JS Workshop 3

The h1 selector sets the color of all <h1> elements to #333.

CodeDay HTML/CSS/JS Workshop 4

// Get HTML elements

const resultContainer = document.querySelector(".result-container");

// Load question and options

optionsElements.forEach((option, index) => {

// Check answer and update score

const selectedAnswer = Number(selectedOption.dataset.answer);

if (selectedAnswer === quizData[currentQuestion].correctAnswer) {

CodeDay HTML/CSS/JS Workshop 5

if (currentQuestion < quizData.length) {

// Event listener for submit button click

// Load initial question

The querySelector and querySelectorAll methods are used to obtain references to

The loadQuestion function is responsible for dynamically populating the question

The question is then set as the text content of the questionElement .

CodeDay HTML/CSS/JS Workshop 6

CodeDay HTML/CSS/JS Workshop 7

You might also like