quiz.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quiz App</title>
</head>

<body style="background-color: #212121; color: #d3d3d3;">
    <h1>JAvascript Quiz APP</h1>

    <div id="quiz"></div>

    <button id="submit">Submit</button>

    <div id="results"></div>
    <script>
        const quizContainer=document.getElementById("quiz")
        const submitButton=document.getElementById("submit")
        const resultsContainer=document.getElementById("results")
        const myQuestions=[
            {
                question:"What is the capital of France?",
                answers:{
                    a:"Paris",
                    b:"London",
                    c:"New York"
                },
                correctAnswer:"a"
            },
            {
                question:"What is the currency of Japan?",
                answers: {
                    a:"Yuan",
                    b:"Euro",
                    c:"Yen"
                },
                correctAnswer:"c"
            }

        ];submitButton.addEventListener('click',showResults)

        function buildQuiz(){
            const output=[]
            myQuestions.forEach((currentQuestion,questionNumber)=>{
                const answers=[]
                for(letter in currentQuestion.answers){
                    answers.push(
                        `<lebel> <input type="radio" name="question${questionNumber}" value="${letter}" />${letter}: ${currentQuestion.answers[letter]} </lebel>`
                    )
                }
                // console.log(answers);
                output.push(
                    `
                    <div class="question">${currentQuestion.question}</div>
                        <div class="answers">${answers.join('')}</div>
                    `
                )
            })
            // console.log(output);
            quizContainer.innerHTML=output.join('')
        }
        function showResults(){
            const answerContainers=quizContainer.querySelectorAll('.answers')
            let numCorrect=0
            myQuestions.forEach((currentQuestion,questionNumber)=>{
                const answerContainer=answerContainers[questionNumber]
                const selector=`input[name=question${questionNumber}]:checked`;
                const userAnswer=(answerContainer.querySelector(selector) || {}).value
                if(userAnswer===currentQuestion.correctAnswer){
                    numCorrect++
                    answerContainers[questionNumber].style.color='green'
                } else{
                    answerContainers[questionNumber].style.color='red'
                }

            })
            resultsContainer.innerHTML=`${numCorrect} out Of ${myQuestions.length}`

        }
        buildQuiz( )
        

    </script>


</body>

</html>