Creating a Quizlet page

JavaScript
,
1

Hi, I’m pretty new to Javascript but I do know a bit HTML and CSS since before.

I try to build a webpage where I can add quizzes with different topics (Animals/Music/Technology etc) where a question will be presented along with 3-4 answer options. I want the user to be able to browse through different topics, select a specific quis (for instance, Animal topic can contain “African Animals”, “Sea creatures” etc, and I want to be able to label the questions used with 1 or more labels to fall within these cathegories.

For the questions, I think I might need to have an array, which contains arrays with the questions, where I add the question as a variable and then the options as other variables. Then I could fetch the first array and get questions within it based on Topics etc.

I just need some input on how I build up the framework for the questions in the easiest way so I do right from the beginning since I don’t think my method is optimal. I will need to have a file/variable containing all questions, maybe already categorized, so that I have an array for all “Animal”-related questions, another array for “Technology” questions etc. I then want to be able to fetch random questions from the topics, depending on what the user selects.

Any input on how to build a good database for questions, with different topics, that then can be randomly selected from different categories, or selected based on a specific category, for the user to be able to see would be of immense help!

var quiz = {
"Animals": [
{
"id": 1,
"question": "What animal is the biggest mammal on earth?",
"options": [
{
"a": "Rhino",
"b": "Elephant",
"c": "Giraffe",
"d": "Blue whale"
}
],
"answer": "Blue whale",
},
{
"id": 2,
"question": "How many legs does a spider have?",
"options": [
{
"a": "6 legs",
"b": "12 legs",
"c": "8 legs"
}
],
"answer": "8 legs",
},...
2

Hello,

Here is the updated version of your code preview. I hope you get idea of edits.

var quiz = [
  {
    id: 1,
    question: "What animal is the biggest mammal on earth?",
    options: ["Rhino", "Elephant", "Giraffe", "Blue whale"],
    answer: "Blue whale"
  },
  {
    id: 2,
    question: "How many legs does a spider have?",
    options: ["6 legs", "8 legs", "12 legs"],
    answer: "8 legs"
  }
  // Add more question objects here
];

// Function to display a question
function displayQuestion(questionObj) {
  console.log(questionObj.question);
  questionObj.options.forEach((option, index) => {
    console.log(`${String.fromCharCode(97 + index)}. ${option}`);
  });
}

// Function to check if an answer is correct
function isAnswerCorrect(questionObj, userAnswer) {
  return questionObj.answer === userAnswer;
}

// Example usage
quiz.forEach(question => {
  displayQuestion(question);
  const userAnswer = prompt("Enter your answer (a, b, c, d): ");
  if (isAnswerCorrect(question, question.options[userAnswer.charCodeAt(0) - 97])) {
    console.log("Correct!\n");
  } else {
    console.log(`Incorrect. The correct answer is ${question.answer}.\n`);
  }
});
3

I have been developing a online trivia game for sometime now and this portion of the script might give you an idea how you can have 2 to 4 answers for the question.

// The `startGame` function takes an object as an argument with properties: ans1, ans2, ans3, ans4, id, question.
// These properties represent the answers to the current question, the question's id, and the question itself, respectively.
const startGame = ({ ans1, ans2, ans3, ans4, id, question }) => {
    // This line sets the id of the current question to the "data-record" attribute of the element with id "currentQuestion".
    document.querySelector("#currentQuestion").setAttribute("data-record", id);

    // This line sets the display number of the current question (index + 1) to the text content of the element with id "currentQuestion".
    document.querySelector("#currentQuestion").textContent = (index + 1).toString();

    // This line sets the text content of the element with id "question" to the question itself.
    document.querySelector("#question").textContent = question;

    // This loop iterates over each of the answer buttons.
    answerButtons.forEach((button, index) => {
        // This line checks if there was a previous "pickAnswer" event listener attached to the button,
        // and if so, removes it.
        const previousPickAnswer = button.__pickAnswer__;
        if (previousPickAnswer) {
            button.removeEventListener("click", previousPickAnswer);
        }

        // This line creates a new "pickAnswer" event listener, and attaches it to the button.
        const newPickAnswer = pickAnswer(index + 1);
        button.addEventListener("click", newPickAnswer, false);
        button.__pickAnswer__ = newPickAnswer;

        let answerText = [ans1, ans2, ans3, ans4][index];

        if (answerText) {
            button.textContent = `📷 ${answerText}`;
            button.style.display = "block";  // Show the button
            button.style.pointerEvents = "auto";  // Enable the button
        } else {
            button.textContent = "";
            button.style.display = "none";  // Hide the button
            button.style.pointerEvents = "none";  // Disable the button
        }


        // If there's no corresponding answer, the button is disabled (its pointer events are set to "none").
        // Otherwise, the button is enabled (its pointer events are set to "auto").
        if (!answerText) {
            button.style.pointerEvents = "none";
        } else {
            button.style.pointerEvents = "auto";
        }

    });
};

This pulls data in from a database table, but here’s the basics JSON layout of it

{
	"id": 200,
	"user_id": 2,
	"hidden": "no",
	"question": "Who are the two main actors in the 1987 comedy film \"Planes, Trains and Automobiles\"?",
	"ans1": "Bill Murray and Dan Aykroyd",
	"ans2": "Chevy Chase and John Belushi",
	"ans3": "John Candy and Steve Martin",
	"ans4": "Eddie Murphy and Dan Aykroyd",
	"correct": 3,
	"category": "movie",
	"date_added": "2023-06-24 23:35:28"
}, {
	"id": 199,
	"user_id": 2,
	"hidden": "no",
	"question": "Who played the role of the inspirational teacher John Keating in \"Dead Poets Society\"?",
	"ans1": "Robert Williams",
	"ans2": "Robert Redford",
	"ans3": "Robin Williams",
	"ans4": "Robert De Niro",
	"correct": 3,
	"category": "movie",
	"date_added": "2023-06-24 23:32:29"
}, {
	"id": 198,
	"user_id": 2,
	"hidden": "no",
	"question": "Who directed the 1939 adventure film \"Gunga Din\"?",
	"ans1": "George Lucas",
	"ans2": "George Stevens",
	"ans3": "Howard Hawks",
	"ans4": "John Ford",
	"correct": 2,
	"category": "movie",
	"date_added": "2023-06-24 23:28:48"
}, {
	"id": 197,
	"user_id": 2,
	"hidden": "no",
	"question": "Which film won the Academy Award for Best Picture in 2020?",
	"ans1": "Parasite",
	"ans2": "1917",
	"ans3": "Once Upon a Time in Hollywood",
	"ans4": "The Irishman",
	"correct": 1,
	"category": "movie",
	"date_added": "2023-06-24 23:26:12"
}]

Here’s a GitHub repository of the full script - brainwaveblitz.js and has other files as well.

Hope this might help a little?

4

@PrashantPujara,

Thank you for your contribution.

For future reference you can format your code in the text editor using the </> option in the top menu. Just select your code in the editor and click on that button.

This formats the code by wrapping it in 3 opening a closing ticks e.g. ``` my code here ```. Note you can also do this manually.

I have done it for you this time :slight_smile: