Question

我正在使用Javascript进行在线测试。我把通道库组织成一个阵列，你可以看到它是一团糟（抱歉代码墙）：

  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."]],
        ]]

它有效，但在上下文中引用和理解是令人讨厌的。我的兄弟明智地指出，它可能会以类似字典的格式组织起来。（对于所有你的学生 - 显然javascript实际上没有词典？但无论它是什么似乎都足够接近）

我尝试过这样的事情：

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
    }

但是我很难知道如何实施这些问题。我觉得我需要字典中的字典;如果我只是使用数组，那么它甚至会破坏甚至这样做的目的。

如果您对我的考试here it is.

感到好奇，请顺便提一下

是的，我意识到我的github存储库很乱。我试图处理它，但github对我来说太混乱了。这是我的第一个真正的项目，我只是在学习绳索。

Answer 1

在谈论数据结构之前，我建议您了解the MVC pattern 。您正在开发一个Web应用程序，然后它就是您的案例中的一个好模式。它可以帮助您解决问题。

MVC的目的是分离代码中的不同内容：

Model是处理数据的应用程序的一部分。
View是处理数据显示的应用程序的一部分。
Controller是处理用户交互的应用程序的一部分。

在您的情况下，我们可以确定3个部分：

您的硬编码字符串数组应由模型处理。
您的用户界面应由视图处理。
您的quizz交互应该由控制器处理。

一旦在代码中实现了良好的分离，就可以更轻松地重构数据结构（数组，对象，对象数组......）或更改这些数据的来源（外部文件，外部第三方API，数据库......）。您只需更改模型内部的逻辑，而无需重构所有应用程序。

在说完之后，我的下一个建议是从您的代码中提取所有数据。将您的字符串存储在数据库中可能会很好（请参阅T30's answer），但首先您可以将数据存储在简单的JSON file 中。从JavaScript加载JSON文件的主题很好（例如How to use a JSON file in javascript）。

最后，我会使用对象数组重构您的数据结构。数组的每个元素都是一个通道（passage1，passage2 ......），对象中的每对键值都是通道的一个元素（标题，文本，问题，答案......）。类似的东西：

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

为了帮助您将数组转换为有效的JSON对象，您可以通过调用JSON.parse(data)直接在浏览器的控制台中对其进行测试。您将看到函数是否可以解析它或者是否出现语法错误。

Answer 2

allQuestions = []

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

为了添加问题：

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

要在JavaScript中使用此结构，只需引用数组中的项目，例如问题标题：

allQuestions[0].title

在我的代码中管理大量硬编码数据的最佳方法是什么？

2 个答案: