Sprint 2 Self Study JS Hack 1

Hack #1

%%html
<div id="chat-history" style="border: 1px solid #ccc; padding: 10px; margin-bottom: 10px;"></div>

<script>
// 2D array of Avengers and their questions using objects with correct answers
var npcArray = [
    [
        'Iron Man',
        [
            { question: 'What is your favorite gadget?', correctAnswer: 'Suit' },
            { question: 'How do you handle pressure?', correctAnswer: 'Focus' }
        ]
    ],
    [
        'Captain America',
        [
            { question: 'What does freedom mean to you?', correctAnswer: 'Choice' },
            { question: 'How do you inspire others?', correctAnswer: 'Lead by example' }
        ]
    ],
    [
        'Black Widow',
        [
            { question: 'What is your greatest mission?', correctAnswer: 'S.H.I.E.L.D. ops' },
            { question: 'How do you stay stealthy?', correctAnswer: 'Patience' }
        ]
    ],
    [
        'Thor',
        [
            { question: 'What is your favorite battle?', correctAnswer: 'Ragnarok' },
            { question: 'How do you wield Mjolnir?', correctAnswer: 'With worthiness' }
        ]
    ],
    [
        'Hulk',
        [
            { question: 'How do you control your anger?', correctAnswer: 'Breathing' },
            { question: 'What makes you strong?', correctAnswer: 'Friends' }
        ]
    ]
];

// Function to update the chat history so viewers can check their interactions with npc
function updateChatHistory(npc, question, answer, feedback) {
    const chatHistory = document.getElementById('chat-history');
    chatHistory.innerHTML += `<strong>${npc}:</strong> <em>${question}</em><br>Your answer: ${answer}<br>${feedback}<br><br>`;
}

// Function to ask a question
function askQuestion(npcName, question, correctAnswer) {
    let answer = prompt(npcName + ' asks:\n\nQ: ' + question + '\n\nYour answer:');
    
    // Make sure the user did not just enter a blank
    if (answer !== null) { 
        let feedback;

        // If else to check if the answer is right
        if (answer.toLowerCase() === correctAnswer.toLowerCase()) {
            feedback = "Correct!";
        } else {
            feedback = "Wrong! The correct answer is: " + correctAnswer + ".";
        }

        // Add the new interactions to the chat history
        updateChatHistory(npcName, question, answer, feedback);
    } else {
        alert('Please enter an answer!');
    }
}

// Function to start the questioning process
function startQuestioning() {
    //variables used to check if all the questions have been asked
    let totalQuestions = npcArray.length * 2;
    let questionsAsked = 0; 

    // Iterate over each NPC
    for (let npc of npcArray) {
        let npcName = npc[0];
        let questions = npc[1];

        // Set a timeout for the first question so stuff appears on the page
        setTimeout(function() {
            askQuestion(npcName, questions[0].question, questions[0].correctAnswer);
            questionsAsked++;
            if (questionsAsked === totalQuestions) {
                alert('All questions have been asked!');
            }

            // Ask the second question immediately after
            askQuestion(npcName, questions[1].question, questions[1].correctAnswer);
            questionsAsked++;
            if (questionsAsked === totalQuestions) {
                alert('All questions have been asked!');
            }
        }, 2000 * npcArray.indexOf(npc));
    }
}

// Call the function    
startQuestioning();
</script>