document.write(`
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 20px;
            padding: 20px;
            background-color: #f4f4f4;
        }

        h1 {
            text-align: center;
            color: #333;
        }

        #enterkey,
        #quizForm,
        #quizContent,
        #quizResults {
            background-color: #fff;
            border: 1px solid #ddd;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 8px;
        }

        input[type="text"] {
            width: 80%;
            padding: 8px;
            margin-bottom: 10px;
        }

        button {
            padding: 10px;
            background-color: #4caf50;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #45a049;
        }

        ul {
            list-style: none;
            padding: 0;
        }

        li {
            margin-bottom: 10px;
        }

        #quizResults {
            display: none; /* Hide quiz results initially */
        }

        #resultImageContainer {
            margin-top: 15px;
        }

        #resultImage {
            max-width: 100%;
        }
    </style>

    <h1>Quiz Generator</h1>
    <!-- Section for API Key Input -->
    <div id="enterkey" style="background-color: #f9f9f9; padding: 15px;">
        Enter API key: 
        <input id="apikey" type="text" style="width: 80%; padding: 8px; margin-bottom: 10px;">  
        <button id="setKeyButton" style="padding: 10px; background-color: #4caf50; color: #fff; border: none; border-radius: 4px; cursor: pointer;">Set API Key</button>
    </div>
    <!-- Quiz Form -->
    <div id="quizForm" style="background-color: #f9f9f9; padding: 15px;">
        <h3>Start your quiz!</h3>
        <button id="startQuizButton" style="padding: 10px; background-color: #4caf50; color: #fff; border: none; border-radius: 4px; cursor: pointer;">Start Quiz</button>
    </div>
    <!-- Quiz Questions and Answers Display -->
    <div id="quizContent" style="background-color: #f9f9f9; padding: 15px;">
        <h3>Quiz Questions</h3>
        <form id="questionForm">
            <div id="questionText"></div>
            <ul id="answerList" style="list-style: none; padding: 0;"></ul>
            <button type="button" id="nextQuestionButton" style="padding: 10px; background-color: #4caf50; color: #fff; border: none; border-radius: 4px; cursor: pointer;">Next Question</button>
        </form>
    </div>
    <!-- Quiz Results -->
    <div id="quizResults" style="background-color: #f9f9f9; padding: 15px; display: none;">
        <h3>Quiz Results</h3>
        <div id="resultsText"></div>
        <div id="resultImageContainer">
            <img id="resultImage" src="" alt="Result Image">
        </div>
    </div>
`);

$(document).ready(function() {
    var apikey = "";
    var questions = [];
    var currentQuestionIndex = 0;
    var userAnswers = [];

    function setkey() {
        apikey = $("#apikey").val().trim();
        $("#enterkey").html("<b>API key has been set.</b>");
    }

    function startQuiz() {
        $.ajax({
            type: "GET",
            url: "https://quizapi.io/api/v1/questions",
            data: {
                apiKey: apikey,
                limit: 5
            },
            success: function(data) {
                
                // MH edit
                console.log ( data );

                questions = data;
                displayQuestion(questions[currentQuestionIndex]);
            },
            error: function(xhr, status, error) {
                $("#questionText").html("<font color='red'>Error: " + error + "</font>");
            }
        });
    }

    function displayQuestion(questionData) {
        $("#questionText").html(questionData.question);
        $("#answerList").empty();
        $.each(questionData.answers, function(key, value) {
            if (value) {
                var radioButton = `<li>
                                       <input type="radio" name="answer" value="${key}"> ${value}
                                   </li>`;
                $("#answerList").append(radioButton);
            }
        });
    }

    function nextQuestion() {
        var selectedAnswer = $("input[name='answer']:checked").val();
        userAnswers[currentQuestionIndex] = selectedAnswer;

        currentQuestionIndex++;
        if (currentQuestionIndex < questions.length) {
            displayQuestion(questions[currentQuestionIndex]);
        } else {
            $("#quizContent").hide();
            calculateResults();
        }
    }

    function calculateResults() {
        var correctCount = 0;
        questions.forEach(function(question, index) {
            var correctAnswerKey = Object.keys(question.correct_answers).find(key => question.correct_answers[key] === "true");
            if (correctAnswerKey && correctAnswerKey.replace("_correct", "") === userAnswers[index]) {
                correctCount++;
            }
        });

        $("#quizResults").show();

        // Update result text based on the score
        var resultText;
        if (correctCount < 3) {
            resultText = `Try harder next time!`;
        } else if (correctCount === 3) {
            resultText = `Good Job!`;
        } else {
            resultText = `Wow, you know your stuff!`;
        }

        $("#resultsText").html(`<h3>You got ${correctCount} out of ${questions.length} questions correct! ${resultText}</h3>`);

        // Update result image based on the score
        updateResultImage(correctCount);
    }

    function updateResultImage(score) {
        var resultImage = $("#resultImage");
        if (score <= 2) {
            resultImage.attr("src", "https://ancientbrain.com/uploads/stepheb3/SadFace.png");
        } else if (score === 3) {
            resultImage.attr("src", "https://ancientbrain.com/uploads/stepheb3/ContentFace.jpg");
        } else if (score >= 4) {
            resultImage.attr("src", "https://ancientbrain.com/uploads/stepheb3/Happyface.jpg");
        }

        // Display the result image container
        $("#resultImageContainer").show();
    }

    $("#setKeyButton").on('click', setkey);
    $("#startQuizButton").on('click', startQuiz);
    $("#nextQuestionButton").on('click', nextQuestion);
});