Quiz App with Jquery - Check Answer

Hello everyone,
I am working on a Quiz App and I am stuck on checking my answer. My button to check my answer resets my quiz. I would like to know if I am on the correct track. I don’t want the issue solved however I would like to know if I am headed in the right direction and if my logic makes sense.

const QUESTIONS = [
        //Question 1
        question: 'Who did the Packers play in the first Super Bowl?',
            'choice1': 'Oakland',
            'choice2': 'Patriots',
            'choice3': 'Kanas City',
            'choice4': 'Da Bears',
        correctAnswer: 'Kanas City'

        //Question 2
        question: 'Who is the current Quarterback?',
        'choice1': 'Mason Crosby',
        'choice2': 'Brett Favre',
        'choice3': 'Aaron Rodgers',
        'choice4': 'Mike Daniels',
        correctAnswer: 'Aaron Rodgers'
        //Question 3
        question: 'How many championships have the Green Bay Packers won?',
            'choice1': '10',
            'choice2': '6',
            'choice3': '8',
            'choice4': '13',
        correctAnswer: '13'
        //Question 4
        question: 'What team did they beat in their last Super Bowl appearance?',
        'choice1': 'Pittsburgh',
        'choice2': 'New England',
        'choice3': 'Seattle',
        'choice4': 'Kanas City',
        correctAnswer: 'Pittsburgh'
        //Question 5
        question: 'What year was Lambeau Field built?',
        'choice1': '1950',
        'choice2': '1957',
        'choice3': '1960',
        'choice4': '2000',
        correctAnswer: '1957'
        //Question 6
        question: 'Since what year have season tickets been sold out?',
        'choice1': '2010',
        'choice2': '1998',
        'choice3': '1989',
        'choice4': '1960',
        correctAnswer: '1960'
        //Question 7
        question: 'Who was the Packers first head coach?',
        'choice1': 'Bart Star',
        'choice2': 'Curly Lambeau',
        'choice3': 'Matt Lefleur',
        'choice4': 'Vince Lombardi',
        correctAnswer: 'Curly Lambeau'
        //Start of js functions for Quiz App-------------------------------------------------------------------------
    //Variables to update score and question number    
    let score = 0;
    let questionNumber = 0;

    function startQuiz() {
        $('.start').on('click', function(){
            console.log('start quiz is working!');
        //this function will listen for a click on the start button
        //then it will take users to the first question
    function updateQuestion() {
       const quizQuestions = `<section class='question'>
                <input type='radio' name='forRadio1' class='rdo' value='0'>${QUESTIONS[questionNumber].choice1}
                <input type='radio' name='forRadio1' class='rdo' value='0'>${QUESTIONS[questionNumber].choice2}
                <input type='radio' name='forRadio1' class='rdo' value='0'>${QUESTIONS[questionNumber].choice3}
                <input type='radio' name='forRadio1' class='rdo' value='0'>${QUESTIONS[questionNumber].choice4}
                <button class='td'>Touchdown?</button>
    function checkAnswer(){
            $('.td').on('click', function(){
                if($('input[value="0"]').prop('checked') == `${QUESTIONS[questionNumber].correctAnswer}`){
                    alert('A horse is a horse of course!');
                    console.log('still working of course');

    function nextQuestion() {
       `${questionNumber ++}`;
        //this function listens for a click on the next button if the answer is correct
        //the user is taken to the next question

    function UpdateScore(){
        let tdScore = `${score += 7}`;
        //this function will see if the answer is correct then update
        //the score accordingly

    function restartQuiz() {
        //this function takes user to the beginning

    function callAllFunctions() {
         checkAnswer();//not sure if i want to call this right away

Warm Regards!

Mind showing your HTML too?

Also, you call callAllFunctions when the page is loaded. This function calls 4 function, but you only need to call one. Which one do you think it should be? Once you figure that out, then you could get rid of the callAllFunctions function and use the single function as the callback for when the page is loaded.


If you are trying to append the quizQuestions HTML to an element with class=“jsList”, when the “Let’s Go!” button is clicked, this is not the way to do it. The on(‘click’) is not doing anything for you here.

`<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>GBP Quiz App</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <header class='headline'>
        <h1 class='title'>This quiz is designed to test some of your Green Bay Packer Knowledge!</h1>
        <h4>Fan Quiz</h4>
<section class='questionUpdate'>
    <ul class='list jsList'>

    <section class='start' >
    <button class='jsStart'>Lets Go!</button>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src = 'questions.js'></script>