Best way to manage lots of hard coded data in my code?

Question

I'm making an online test using Javascript. I organized the passage bank as an array, and as you can see it's a mess (sorry for the wall of code):

  var passageBank = [
        ["Passage 1", //Passage Title
        '<p>In 1960, Dr. George Sperling asked participants to recall a 4x3 group of letters flashed on a screen for less than a second. When instructed to recall as many letters as possible, most participants could only name the first four or five letters.</p><p>Dr. Sperling then asked another group to name only one of the rows. After they saw the image flash, he would randomly sound one of three tones. Sounding a high-frequency tone indicated that the participant should give the first line of letters; a medium-frequency tone indicated the middle row; and a low-frequency tone asked for the last row. If the tone was broadcast immediately after the image was flashed, the majority of subjects recalled all four letters. This marked the discovery of iconic memory, the visual form of sensory memory. Audible sensory memory (also known as echoic memory) lasts for several seconds.</p><div id="figure"><img src="https://ka-perseus-images.s3.amazonaws.com/a7d4238a28e6eef5321d3f6278fb17ce5a9461cf.png"></div><b>Figure 1</b><span id="figure">Experimental setup for Dr. Sperling</span><p>Sensory memory is constantly processing enormous amounts of information from the world around you. What you pay attention to gets passed into working memory. This stage can be described in three major sections – the visuospatial sketchpad, the phonological loop, and the central executive. The sketchpad stores visual information, like a photograph, while the loop deals with words and numbers. The job of coordinating the two falls to the central executive – connecting an address you hear with a map that you see, for example.</p>', //Passage with Formatting
        [[/*Array of Questions*/
        /*Question 1*/
        "Why did Dr. Sterling use a tone to indicate the line of the row he wanted participants to recite?", 
        /*A*/
        "Asking verbally would take longer than iconic memory lasts",
        /*B*/
        "Dr. Sperling intended to study the connection between audio and visual cues", 
        /*C*/
        "It was the clearest way to signal the question to multiple participants",  
        /*D*/
        "Using an audible cue helped trigger echoic memory", 
        /*Answer*/
        "A",
        /*Student Answer*/
        "X",
        /*Solution*/
        "The tones were part of the second round of the experiment.<br><br>Iconic memory is thought to last only a fraction of a second.<br><br>In order to test iconic memory, Dr. Sperling required a stimulus that was quick enough that the image would still be in participants heads."
        ],
        [/*Question 2*/"Which is the best test of echoic memory?","Asking participants to provide the next line in a well-known song","Asking participants to summarize a story that was read to them", "Asking participants to identify whether two tones are identical", "Asking participants to sing the first line of their favorite song", "C", "X", "Echoic memory is a form of sensory memory - it is very short-lived.<br><br>Echoic memory is an audible fragment of the information we are continually processing from the outside world.<br><br>Asking participants to identify whether two tones are identical is the best test of echoic memory."],
        [/*Question 3*/"Which of the following explains why we see movement in a flip-book or stop-motion animation?", "Iconic memory","Central executive", "Echoic memory", "Visuospatial sketchpad", "A", "X", "Flip-books and stop-motion animations are both series of still images flashed in front of the eyes in quick succession to create a moving image.<br><br>The central executive is responsible for coordinating the visuospatial sketchpad and the phonological loop.<br><br>Iconic memory is a major part of change detection, and helps us notice the changes in each progressive image, turning it into a single moving picture."],
        [/*Question 4*/"If you drive by a stop sign and then try to recall it several minutes later, which are you using?", "Echoic memory, then the phonological loop","Echoic memory, then the visuospatial sketchpad", "Iconic memory, then the visuospatial sketchpad", "Iconic memory, then the phonological loop", "D", "X", "Information passes through the sensory memory to the working memory.<br><br>A stop sign is a picture of a word.<br><br>The stop sign (a picture of a word) would first pass through the iconic memory, and then into phonological loop."],
        [/*Question 5*/"Which of the following is a technique used to increase the amount of information stored in working memory?","Semantic Networking","Imagery", "Self-referencing","Chunking","D", "X", "Many mnemonic techniques are focused on transferring information from working memory to long-term memory.<br><br>Semantic networks are like mental maps in our heads where we connect related concepts.<br><br>Chunking is the process of grouping information to reduce the number of “datums” stored, to allow for a greater amount of information to be stored in working memory. Ex: remembering TVFBIHPCBS as TV FBI HP CBS."]],
        ]]

It works, but it's annoying to reference and understand in context. My brother wisely pointed out that it would probably be better organized in a dictionary-like format. (For all you pedants - apparently javascript doesn't actually have dictionaries? But whatever it is seems close enough)

I tried doing something like this:

var passageBank = {
        'Passage 1': '<p>In 1960, Dr. George Sperling asked participants to recall a 4x3 group of letters flashed on a screen for less than a second. When instructed to recall as many letters as possible, most participants could only name the first four or five letters.</p><p>Dr. Sperling then asked another group to name only one of the rows. After they saw the image flash, he would randomly sound one of three tones. Sounding a high-frequency tone indicated that the participant should give the first line of letters; a medium-frequency tone indicated the middle row; and a low-frequency tone asked for the last row. If the tone was broadcast immediately after the image was flashed, the majority of subjects recalled all four letters. This marked the discovery of iconic memory, the visual form of sensory memory. Audible sensory memory (also known as echoic memory) lasts for several seconds.</p><div id="figure"><img src="https://ka-perseus-images.s3.amazonaws.com/a7d4238a28e6eef5321d3f6278fb17ce5a9461cf.png"></div><b>Figure 1</b><span id="figure">Experimental setup for Dr. Sperling</span><p>Sensory memory is constantly processing enormous amounts of information from the world around you. What you pay attention to gets passed into working memory. This stage can be described in three major sections – the visuospatial sketchpad, the phonological loop, and the central executive. The sketchpad stores visual information, like a photograph, while the loop deals with words and numbers. The job of coordinating the two falls to the central executive – connecting an address you hear with a map that you see, for example.</p>', //Passage with Formatting
    }

But I'm stumped as to how I should go about implementing the questions. I feel like I would need a dictionary within a dictionary; if I just use arrays then it sort of defeats the purpose of even doing this.

BTW if you're curious about my test here it is.

And yeah I realize my github repository is a mess. I'm trying to deal with it but github is so confusing for me. This is my first ever real project and I'm just learning the ropes.

Answer 1

Before talking about data structure, I would suggest you to learn about the MVC pattern. You are developing a web application then it's a good pattern in your case. It can help to solve your issue.

The purpose of MVC is to separate different things in your code:

• The Model is the part of the application that handles the data.
• The View is the part of the application that handles the display of the data.
• The Controller is the part of the application that handles user interaction.

In your case, we can identify the 3 parts:

• Your array of hard coded strings should be handled by the model.
• Your user interface should be handled by the view.
• Your quizz interactions should be handled by the controller.

Once you have a good separation in your code, it becomes easier to refactor the structure of your data (an array, an object, an array of objects...) or change the source of these data (an external file, an external third-party API, a database...). You just have to change the logic inside the model without having to refactor all the application.

After saying that, my next advice would be to extract all your data from your code. Store your strings in a database could be nice (see T30's answer), but for the start you could store your data in a simple JSON file. The topic of loading a JSON file from JavaScript is well covered (e.g. How to use a JSON file in javascript).

Finally, I would refactor your data structure with an array of objects. Each element of the array would be a passage (passage1, passage2...) and each pair of key-value in the object would be an element of the passage (the title, the text, the questions, the answers...). Something like:

[
    {
        "title": "Passage 1",
        "text": "…",
        "questions": [
            {
                "label": "…",
                "choices": ["…"],
                "answer": "…",
                "solution": "…"
            },
            { ... },
            { ... }
        ]
    },
    {
        "title": "Passage 2",
        ...
    },
    {
        "title": "Passage 3",
        ...
    }
]

To help you converting your array to a valid JSON object, you can test it directly in your browser's console by calling JSON.parse(data). You will see if the function can parse it or if you get some syntax errors.

Answer 2

allQuestions = []

function question(options, answer, solution, title) {
this.title = title;
this.options = options;
this.answer = answer;
this.solution = solution;
allQuestions.push(this)
}

In order to add questions:

new question(options, answer, solution, title);

And to use this structure in JavaScript simply refer to the item in the array, eg like a Questions Title:

allQuestions[0].title