gistlib - craft a static quiz page with a 'start' button; clicking it reveals 3 questions. employ javascript for the quiz, then display the user's average response time and 3-question score in javascript

To create a static quiz page with a "start" button, reveal 3 questions, calculate the average response time, and display the score, you can use HTML, CSS, and JavaScript together.

Here is a step-by-step guide to implementing this:

HTML Structure: Start by creating the basic HTML structure for the quiz page. Include a "start" button and a container to display the questions and quiz results. Also, create a container to display the average response time.


<!DOCTYPE html>
<html>
<head>
    <title>Quiz Page</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>Quiz Page</h1>

    <div id="start-container">
        <button id="start-btn">Start</button>
    </div>

    <div id="quiz-container" style="display: none;">
        <h2>Quiz Questions</h2>
        <div id="question-container"></div>
        <button id="submit-btn">Submit</button>
    </div>

    <div id="result-container" style="display: none;">
        <h2>Results</h2>
        <p id="average-time"></p>
        <p id="score"></p>
    </div>

    <script src="script.js"></script>
</body>
</html>
645 chars
29 lines

CSS Styling: Create a CSS file (styles.css) to apply some basic styling to the quiz page elements.


body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
}

h1, h2 {
    text-align: center;
}

#start-container {
    text-align: center;
    margin-bottom: 20px;
}

#quiz-container, #result-container {
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
}

#question-container {
    text-align: left;
}

#submit-btn {
    margin-top: 10px;
}

#average-time {
    font-weight: bold;
}

#score {
    font-weight: bold;
    margin-top: 10px;
}
477 chars
38 lines

JavaScript Code: Create a JavaScript file (script.js) to handle the quiz functionality. This includes generating random questions, capturing response times, calculating the average time, and displaying the score.


index.tsx
// Define the quiz questions
const quizQuestions = [
    {
        question: "Question 1?",
        answer: "A"
    },
    {
        question: "Question 2?",
        answer: "B"
    },
    {
        question: "Question 3?",
        answer: "C"
    }
];

// Get the required HTML elements
const startBtn = document.getElementById("start-btn");
const quizContainer = document.getElementById("quiz-container");
const questionContainer = document.getElementById("question-container");
const submitBtn = document.getElementById("submit-btn");
const resultContainer = document.getElementById("result-container");
const averageTimeElement = document.getElementById("average-time");
const scoreElement = document.getElementById("score");

// Initialize variables
let currentQuestionIndex = 0;
let startTime;
let responseTimes = [];

// Event listener for the start button
startBtn.addEventListener("click", startQuiz);

// Function to start the quiz
function startQuiz() {
    startBtn.style.display = "none";
    quizContainer.style.display = "block";
    generateQuestion();
    startTime = Date.now();
}

// Function to generate and display the current question
function generateQuestion() {
    const currentQuestion = quizQuestions[currentQuestionIndex];

    questionContainer.innerHTML = `
        <p>${currentQuestion.question}</p>
        <input type="text" id="answer-input" placeholder="Enter your answer">
    `;
}

// Event listener for the submit button
submitBtn.addEventListener("click", submitAnswer);

// Function to submit the user's answer and proceed to the next question
function submitAnswer() {
    const answerInput = document.getElementById("answer-input");
    const userAnswer = answerInput.value.toUpperCase();
    
    if (userAnswer === quizQuestions[currentQuestionIndex].answer) {
        const responseTime = Date.now() - startTime;
        responseTimes.push(responseTime);
    }

    currentQuestionIndex++;
    if (currentQuestionIndex < quizQuestions.length) {
        generateQuestion();
        startTime = Date.now();
    } else {
        finishQuiz();
    }
}

// Function to finish the quiz and display the results
function finishQuiz() {
    quizContainer.style.display = "none";
    resultContainer.style.display = "block";

    const averageTime = calculateAverageTime();
    averageTimeElement.innerText = `Average Response Time: ${averageTime} milliseconds`;

    const score = calculateScore();
    scoreElement.innerText = `Score: ${score}/${quizQuestions.length}`;
}

// Function to calculate the average response time
function calculateAverageTime() {
    const sum = responseTimes.reduce((total, time) => total + time, 0);
    return (sum / responseTimes.length).toFixed(2);
}

// Function to calculate the score
function calculateScore() {
    let score = 0;

    for (let i = 0; i < quizQuestions.length; i++) {
        if (responseTimes[i] !== undefined) {
            score++;
        }
    }

    return score;
}
2963 chars
104 lines

Make sure to link the JavaScript file (script.js) in the HTML file.

Testing: Open the HTML file in a web browser and click the "Start" button. The quiz questions will be revealed one by one. Enter your answer in the provided input and click "Submit". After answering all the questions, the final results will be displayed, showing the average response time and score.

Note: This implementation assumes that the answers are single letter (e.g., "A", "B", "C"). You can modify it to suit your specific needs.

That's it! You now have a static quiz page with a "start" button, three questions, and the ability to calculate average response time and score using JavaScript.

craft a static quiz page with a 'start' button; clicking it reveals 3 questions. employ javascript for the quiz, then display the user's average response time and 3-question score in javascript

similar javascript code snippets

related categories