How to reference object properties within nested objects in JavaScript

Question

I'm trying to create a trivia game that has a set of questions and answers (each question has one correct answer, but 3 other answers will be displayed in multiple choice format for a user to choose from).

The problem I'm running into is that I don't know how to best structure my objects to accomplish my goal.

I've considered the following approaches so far: -Create a 'questions' object that includes a series of questions, the correct answers, and dummy answers for each. i.e.

var metricQuestions = {
    q1: {
        question: "What is my name?",
        correctAnswer: "Elizabeth",
        incorrectAnswer1: "David",
        incorrectAnswer2: "Fraser"
    },
    q2: {
        question: "What is my dog's name?",
        correctAnswer: "Annie",
        incorrectAnswer1: "Purple",
        incorrectAnswer2: "Face"
    }
};

This approach sucks from a manual labor standpoint, because I can't pull from a bank of random 'wrong' answers when I'm presenting the user with the question and the correct answer. It feels inefficient and duplicative.

-Create separate objects for 'questions' and 'answers' respectively, and reference within the questions object which answer is correct for a particular question. Syntax wise, I couldn't get this to work.

var metricQuestions = {
    q1: {
        question: "What is First Contentful Paint (FCP)?",
        correctAnswerID = (metricAnswers.a1)
    },
    q2: {
        question: "What is Time to Interactive (TTI)?",
        correctAnswerID: a1
    }
};

I've also tried just setting the correct answer as a string within the metricQuestions object, but then I face the problem of having to deal with potential duplicates in the answer bank when I'm pulling randomly to fill in the other multiple choice options (among other potential problems).

-The final approach I've tried is a nested approach, where properties within the same object are referencing one another. Syntactically, I'm getting all sorts of errors "Uncaught SyntaxError: Invalid shorthand property initializer."

var questionBank = {
    answers: {
        a1: "A lab metric that measures when the main thread is quiet enough to respond to user input.",
        a2: "A field and lab metric that tells when the first pixel is painted on the screen.",
        a3: "Test answer 3.",
        a4: "Test answer 4.",
        a5: "Test answer 5."
    },
    questions: {
        q1: {
        question: "What is First Contentful Paint (FCP)?",
        correctAnswerID = questionBank.answers.a1
        },
        q2: {
        question: "What is Time to Interactive (TTI)?",
        correctAnswerID = questionBank.answers.a2
    },
    }
};

How can I most efficiently have a bank of questions to shuffle through with a corresponding correct answer and several false answers for a multiple choice trivia game?

J. Nicastro · Accepted Answer · 2019-04-12 23:48:10Z

3

Your QuestionBank can be an Array so you easily get random questions without knowing the keys (like q1, q2, ect).

Each element of the QuestionBank would an object Question with the question, one correct answer and an array of wrong answers from which you can choose some of them to be displayed (you can have 8 and chose 3 random each time). Like this:

const QuestionBank = [ { 
                         question: "What is my name?",
                         correctAnswer: "Elizabeth",
                         wrongAnswers: ["David", "John", "Julian", "Eugene", "Robert"]
                       },

                       { 
                         question: "What is my dog's name?"
                         correctAnswer: "Annie",
                         wrongAnswers: ["David", "John", "Julian", "Eugene", "Robert"]
                       }];

answered Apr 12, 2019 at 23:48

J. Nicastro

2543 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ctznkane525 Over a year ago

i like it...but id recommend using the index of the array for the correct answer

blarpsplat Over a year ago

Thank you so much! @Ctznkane525 what do you mean by accessing it by the index, syntax wise?

Ctznkane525 Over a year ago

The answers would be an array...and the right answer would be an index in the array...prevents data duplication

J. Nicastro Over a year ago

@Ctznkane525 I can't seem to get where I could have duplicated data. Nonetheless while you approach sure saves some space in the key name, I don't think it's clear codewise. Something like questionBank[0].correctAnswer is more clear than questionBank[0].answers[0].

J. Nicastro Over a year ago

@blarpsplat If it helped to solve your problem, do you mind selecting this as the answer? Thanks!

Collectives™ on Stack Overflow

How to reference object properties within nested objects in JavaScript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related