[SOLVED] Quiz System not working

Vivek_Kumar_Chaini · September 3, 2023, 9:30pm

Hello , I wanted to create a quiz system where the user will be able to select from the options that are given, and then when we click on the submit button it should check for the right answer, and if it is right the texture of the button will be replaced to something in green border, If wrong the button texture will be something in red border(these are already there and working according to the code), And after we press the continue button(which will be enabled after we submit the answer)it should go to the next question in the array. Also, there is a scoring system which will be incremented by 5 for each correct answer. Here below is the code that I have and it’s not working as I wanted it to be.

Here are the points below that i noticed not working but the logic is there:

It should allow a user to be able to select the option and based on the current option selected it should say if it is wrong or right. But, right now idk why no matter what option I chose it only chooses the first option. So the selection is not working.
It should only enable the answer buttons based on the answer options available in the array. Ex: if 4 option is there in the array it should enable all four option buttons and if there is 2 option available it should enable only 2 option button. (Here in the code the text is updating but the buttons are not disabled)

Reference image of hierarchy:
(AnswerButtons is the parent entity that contains all four options which are going to be the maximum options I am going to have. Also, each option button has a Text entity as a child which will be updated for the answers in the array)

If anyone can look at the code and tell where is the problem will be very helpful. I have created this in a very short time. Thanks in advance. Any kind of help here is appreciated.

IGNORE THE QUESTIONS THOSE ARE DUMMY FOR TESTING

var Quiz = pc.createScript('quiz');

Quiz.attributes.add('questionText', { type: 'entity' });
Quiz.attributes.add('answerButtons', { type: 'entity' });
Quiz.attributes.add('submitButton', { type: 'entity' });
Quiz.attributes.add('continueButton', { type: 'entity' });

Quiz.prototype.initialize = function () {
    // Initialize variables
    this.currentQuestion = 0;
    this.score = 0;
    this.questions = [
        {
            question: "We are humans?",
            answers: ["Yes", "No"],
            correct: 0
        },

        {
            question: "We can eat?",
            answers: ["No", "Yes"],
            correct: 1
        },

        {
            question: "We can Run?",
            answers: ["Probably", "We cant", "No", "Yes"],
            correct: 3
        }

        
        // Add more questions here
    ];

    // Initialize UI elements
    this.displayQuestion();

    
    this.submitButton.button.on('click', function(event) {

    this.checkAnswer();
    
}, this);    


this.continueButton.button.on('click', function(event) {

    this.displayQuestion();
    
}, this);   

};


Quiz.prototype.update = function(dt) {



};


Quiz.prototype.displayQuestion = function () {
    // Clear previous question and answer buttons
    this.questionText.element.text = this.questions[this.currentQuestion].question;
    this.disableAnswerButtons();

    // Enable answer buttons based on the number of options
    for (var i = 0; i < this.questions[this.currentQuestion].answers.length; i++) {
        this.answerButtons.findByName("Text" + i).element.text = this.questions[this.currentQuestion].answers[i];
        this.answerButtons.findByName("Option" + i).enabled = true;
    }

    // Enable Submit button
    this.submitButton.enabled = true;
};

Quiz.prototype.checkAnswer = function () {
    var selectedAnswerIndex = -1;
    
    // Determine which answer button was selected
    for (var i = 0; i < this.questions[this.currentQuestion].answers.length; i++) {
        if (this.answerButtons.findByName("Text" + i).element.text === this.questions[this.currentQuestion].answers[i]) {
            selectedAnswerIndex = i;
            break;
        }
    }

    var correctAnswerIndex = this.questions[this.currentQuestion].correct;

    if (selectedAnswerIndex === correctAnswerIndex) {
        // Correct answer
        this.score+=5;
        this.answerButtons.findByName("Option" + selectedAnswerIndex).element.textureAsset = this.app.assets.find("correctTextureAsset1"); // Set to correct texture
    } else {
        // Incorrect answer
        this.answerButtons.findByName("Option" + selectedAnswerIndex).element.textureAsset = this.app.assets.find("incorrectTextureAsset"); // Set to incorrect texture
        this.answerButtons.findByName("Option" + correctAnswerIndex).element.textureAsset = this.app.assets.find("correctTextureAsset"); // Set the correct answer to correct texture
    }

    // Disable answer buttons and show Continue button
    this.disableAnswerButtons();
    this.submitButton.enabled = false;
    this.continueButton.enabled = true;
};

Quiz.prototype.disableAnswerButtons = function () {
    // Disable all answer buttons
    for (var i = 0; i < this.questions[this.currentQuestion].answers.length; i++) {
        this.answerButtons.findByName("Option" + i).enabled = false;
    }
};



// Add code to handle the "Continue" button click event

Vivek_Kumar_Chaini · September 4, 2023, 5:56pm

Can I get some assistance here @Albertos @Leonidas? It will be really helpful

Leonidas · September 4, 2023, 6:01pm

Hi @Vivek_Kumar_Chaini,

This is quite a large system and it’s difficult to debug out of context (without a working project). If you are able that would help tons, otherwise we will still try to help.

Just be patient for the forum members to study it on their time.

Vivek_Kumar_Chaini · September 4, 2023, 7:53pm

@Leonidas actually I have made some changes in the code and I am able to change the questions. I will share an example project if I face some challenges going forward. Thanks

Vivek_Kumar_Chaini · September 4, 2023, 8:41pm

@Leonidas Is there any way to let user select from the option buttons and then if they press the submit button then only it should check if the selected option is correct or not? I am not able to figure out how to do this.

Vivek_Kumar_Chaini · September 5, 2023, 10:35am

@Albertos @Leonidas I solved it myself. This query can be marked as solved now. I will share the code if it helps someone. This script allows you to select the options and check the answer if we press submit. Pressing continue will change the questions.
Just make sure to create a parent game object AnswerButtons with options as children and also having text entity as children of options as this image:

and each answer button should have this script with a bool that will be true when we click on the buttons.

var Button = pc.createScript('button');

Button.prototype.initialize = function () {
    //this.isCorrect = null; // Indicates if this option is correct
    //this.isClicked = null; // Indicates if this option has been clicked

    this.entity.button.on('click', function(event) {
   
    this.pressed = true;
    
}, this); 
    
};

and this will be the main quiz script:

var Quiz = pc.createScript('quiz');

// Add attributes for UI elements
Quiz.attributes.add('questionText', { type: 'entity' });
Quiz.attributes.add('answerButtons', { type: 'entity' });
Quiz.attributes.add('submitButton', { type: 'entity' });
Quiz.attributes.add('continueButton', { type: 'entity' });

Quiz.prototype.initialize = function() {
    // Initialize variables
    this.currentQuestion = 0;
    this.score = 0;
    this.questions = [

        {
            question: "We are humans?",
            answers: ["Yes", "No"],
            correct: 0
        },

        {
            question: "We can eat?",
            answers: ["No", "Yes"],
            correct: 1
        },

        {
            question: "We can Run?",
            answers: ["Probably", "We cant", "No", "Yes"],
            correct: 3
        }
        
    ];

    // Initialize UI elements
    this.displayQuestion();

    // Add event listeners for buttons
    this.submitButton.button.on('click', function(event) {
        this.checkAnswer();
    }, this);

    this.continueButton.button.on('click', function(event) {
        for (var i = 0; i < 4; i++) {
        this.answerButtons.children[i].script.button.pressed = false; // making the bool false whenever the continue button gets clicked
    }
        this.currentQuestion++;
        if (this.currentQuestion < this.questions.length) {
            this.displayQuestion();
        } else {
            console.log("Quiz completed! Your score is: " + this.score);
        }
    }, this);
};

Quiz.prototype.displayQuestion = function() {
    // Display the current question and answers
    var currentQuestionData = this.questions[this.currentQuestion];
    this.questionText.element.text = currentQuestionData.question;

    // Enable the appropriate number of answer buttons
    for (var i = 0; i < 4; i++) {
        var button = this.answerButtons.children[i];
        if (i < currentQuestionData.answers.length) {
            button.enabled = true;
            button.children[0].element.text = currentQuestionData.answers[i];
        } else {
            button.enabled = false;
        }
    }

    // Reset the submit and continue buttons
    this.submitButton.enabled = true;
    this.continueButton.enabled = false;
};

Quiz.prototype.checkAnswer = function() {
    var selectedAnswerIndex;
    
    // Determine which answer was selected
    for (var i = 0; i < 4; i++) {
        if (this.answerButtons.children[i].script.button.pressed) {
            selectedAnswerIndex = i;
            break;
        }
    }

    var correctAnswerIndex = this.questions[this.currentQuestion].correct;

    // Check if the selected answer is correct or not
    if (selectedAnswerIndex === correctAnswerIndex) {
        // Correct answer
        this.score += 5;
        //this.answerButtons.children[selectedAnswerIndex].element.textureAsset =
           // this.app.assets.find("correctTextureAsset");
    } //else {
        // Incorrect answer
        //this.answerButtons.children[selectedAnswerIndex].element.textureAsset =
            //this.app.assets.find("incorrectTextureAsset");
        
        // Highlight the correct answer in green
        //this.answerButtons.children[correctAnswerIndex].element.textureAsset =
            //this.app.assets.find("correctTextureAsset1");
    //}

    // Disable the submit button and enable the continue button
    this.submitButton.enabled = false;
    this.continueButton.enabled = true;
};

Hope, This helps someone in need. Thanks

Leonidas · September 5, 2023, 10:54am

Glad you sorted this out, and thanks for sharing your solution.