Quick Talk

Bootstrap + Jquery Chat Quiz

by erwan | Leave a comment

This article describes the javascript and bootstrap lines that unfold the multiple question quiz with automatic scroll and smooth transitions

I did spend a few minutes googling for the ideal association of chat like display and quiz elements (multiple choices). Most answers on chat based display provide code for displaying message application, not the automatic bot I was trying to code. I finally stumbled upon a good example from shuffle.dev, and finally asked chat GPT to reproduce the effect. Which he did in a few iteration of questions and answers based on boostrap and jquery foundations. Find on codepen the Code sample that uses bootstrap cards to display chat layout of multiple questions.

the Question / Answer method

this javascript method displays a question associated with multiple choices coded as javascript array

 function displayQuestionAndAnswers(question, choices) {
        displayMessage('' + question, 'system');
        const choicesHTML = choices.map((choice) => {
            return `<button onclick="checkAnswer('${choice}')" class="btn btn-outline-primary">${choice}</button>`;
        }).join('');
        displayAnswerMessage(choicesHTML, 'system');
    }

usage is quite simple, as you can see we generate buttons that will activate the checkAnswer method, this is where we decide on 2nd question switch depending on first answer

const question1Choices = ['A', 'B', 'C'];
displayQuestionAndAnswers('1st QUESTION.', question1Choices);
 function checkAnswer(answer) {
        // Implement your quiz logic here
        if (currentQuestion === 1) {
            if (answer.toLowerCase() === 'a') {
                // displayMessage('You selected option A', 'system');
                currentQuestion=2
                displayQuestionAndAnswers('2e  question.', question2Choices)
            } else if (answer.toLowerCase() === 'b') {
                displayMessage('You selected option B', 'system');
            } else if (answer.toLowerCase() === 'c') {
                displayMessage('You selected option C', 'system');
            } else {
                displayMessage('Incorrect answer. Try again.', 'system');
            }
        } else if (currentQuestion === 2) {
            // Implement logic for the second question
            if (answer.toLowerCase() === 'x') {
                displayMessage('You selected option X', 'system');
            } else if (answer.toLowerCase() === 'y') {
                displayMessage('You selected option Y', 'system');
            } else if (answer.toLowerCase() === 'z') {
                displayMessage('You selected option Z', 'system');
            } else {
                displayMessage('Incorrect answer. Try again.', 'system');
            }
        }

        // Scroll to the latest message with a smooth effect
         scrollToLatestMessage ();
    }

you can understand here that after switching to the appropriate next message, we need to scroll if necessary using the position of the chatBox element

function scrollToLatestMessage() {
        chatBox.scrollTop = chatBox.scrollHeight;
        window.scrollTo({ left: 0, top: document.body.scrollHeight, behavior: "smooth" });

    }
To top