如何使用Javascript和JSON生成HTML代码?

Question

我需要通过解析JSON文件创建一个测验。检查后的答案必须存储在本地存储器中。

JSON代码:

{
"quiz": {
"q1": {
"question": "Which one is correct team name in NBA?",
"options": [
"New York Bulls",
"Los Angeles Kings",
"Golden State Warriros",
"Huston Rocket"
],
"answer": "Huston Rocket"
},
"q2": {
"question": "'Namaste' is a traditional greeting in which Asian language?",
"options": [
"Hindi",
"Mandarin",
"Nepalese",
"Thai"
],
"answer": "Hindi"
},
"q3": {
"question": "The Spree river flows through which major European capital city?",
"options": [
"Berlin",
"Paris",
"Rome",
"London"
],
"answer": "Berlin"
},
"q4": {
"question": "Which famous artist had both a 'Rose Period' and a 'Blue Period'?",
"options": [
"Pablo Picasso",
"Vincent van Gogh",
"Salvador Dalí",
"Edgar Degas"
],
"answer": "Pablo Picasso"
}
}
}

代码如下:

<div id="container"></div>
<input type ="submit" name ="submit" value = "Submit answers" onclick = "results()">
<script>
let data = {"quiz": {"q1": {"question": "Which one is correct team name in NBA?", "options": ["New York Bulls", "Los Angeles Kings", "Golden State Warriros", "Huston Rocket"], "answer": "Huston Rocket"}, "q2": {"question": "'Namaste' is a traditional greeting in which Asian language?", "options": ["Hindi", "Mandarin", "Nepalese", "Thai"], "answer": "Hindi"}, "q3": {"question": "The Spree river flows through which major European capital city?", "options": ["Berlin", "Paris", "Rome", "London"], "answer": "Berlin"}, "q4": {"question": "Which famous artist had both a 'Rose Period' and a 'Blue Period'?", "options": ["Pablo Picasso", "Vincent van Gogh", "Salvador Daly", "Edgar Degas"], "answer": "Pablo Picasso"}}};
let list = document.createElement("ul");
for (let questionId in data["quiz"]) {
let item = document.createElement("node");
let question = document.createElement("strong");
question.innerHTML = questionId + ": " + data["quiz"][questionId]["question"];
item.appendChild(question);
list.appendChild(item);
let sublist = document.createElement("ul");
item.appendChild(sublist);
for (let option of data["quiz"][questionId]["options"]) {
item = document.createElement("input");
item.type = "radio";
item.name = data["quiz"][questionId];
var label = document.createElement("label");
label.htmlFor = "options";
label.appendChild(document.createTextNode(data["quiz"][questionId]["options"]));
var br = document.createElement('br');
sublist.appendChild(item);
document.getElementById("container").appendChild(label);
document.getElementById("container").appendChild(br); 
}                      
}
document.getElementById("container").appendChild(list);     
function results () {
var score = 0;
if (data["quiz"][questionId]["answer"].checked) {
score++;
}
}
localStorage.setItem("answers","score");
</script>    

我应该得到这个:

输入图片描述

不管我重写多少次代码，我都得到了这个:

输入图片描述

我哪里做错了?

非常感谢你的帮助，

玛丽。

Answer 1

您在document.createElement("node")上有一个小错误-没有标记node，因此附加其他元素也不正确。代码可以简化如下(添加到本地存储将在代码片段中抛出错误)

let data = {
"quiz": {
"q1": {
"question": "Which one is correct team name in NBA?",
"options": ["New York Bulls", "Los Angeles Kings", "Golden State Warriros", "Huston Rocket"],
"answer": "Huston Rocket"
},
"q2": {
"question": "'Namaste' is a traditional greeting in which Asian language?",
"options": ["Hindi", "Mandarin", "Nepalese", "Thai"],
"answer": "Hindi"
},
"q3": {
"question": "The Spree river flows through which major European capital city?",
"options": ["Berlin", "Paris", "Rome", "London"],
"answer": "Berlin"
},
"q4": {
"question": "Which famous artist had both a 'Rose Period' and a 'Blue Period'?",
"options": ["Pablo Picasso", "Vincent van Gogh", "Salvador Daly", "Edgar Degas"],
"answer": "Pablo Picasso"
}
}
};
// utility prototype to shuffle an array
Array.prototype.shuffle=()=>{
let i = this.length;
while (i > 0) {
let n = Math.floor(Math.random() * i);
i--;
let t = this[i];
this[i] = this[n];
this[n] = t;
}
return this;
};

let list = document.createElement("ul");
Object.keys(data.quiz).forEach((q, index) => {
// the individual record
let obj = data.quiz[q];

// add the `li` item & set the question number as data-attribute
let question = document.createElement("li");
question.textContent = obj.question;
question.dataset.question = index + 1;
question.id = q;
// randomise the answers
obj.options.shuffle();
// Process all the answers - add new radio & label
Object.keys(obj.options).forEach(key => {
let option = obj.options[key];
let label = document.createElement('label');
label.dataset.text = option;
let cbox = document.createElement('input');
cbox.type = 'radio';
cbox.name = q;
cbox.value = option;

// add the new items
label.appendChild(cbox);
question.appendChild(label);
});

// add the question
list.appendChild(question);
});
// add the list to the DOM
document.getElementById('container').appendChild(list);

// Process the checked radio buttons to determine score.
document.querySelector('input[type="button"]').addEventListener('click', e => {
let score = 0;
let keys = Object.keys(data.quiz);

document.querySelectorAll('[type="radio"]:checked').forEach((radio, index) => {
if( radio.value === data.quiz[ keys[index] ].answer ) score++;
});

console.log('%d/%d', score, keys.length);
localStorage.setItem("answers", score);
})

#container>ul>li {
font-weight: bold
}
#container>ul>li>label {
display: block;
padding: 0.1rem;
font-weight: normal;
}
#container>ul>li>label:after {
content: attr(data-text);
}
#container>ul>li:before {
content: 'Question 'attr(data-question)': ';
color: blue
}

<div id="container"></div>
<input type="button" value="Submit answers" />

Answer 2

您需要对您的嵌套循环做一些小改动，以便将选项标签插入到正确的位置。查看标记为"remove"的代码片段。和";add"对于您需要进行的更改。

正如@ProfessorAbronsius所指出的，没有一个名为"node"的html标签，尽管这不会阻止你的代码工作。

let data = {"quiz": {"q1": {"question": "Which one is correct team name in NBA?", "options": ["New York Bulls", "Los Angeles Kings", "Golden State Warriros", "Huston Rocket"], "answer": "Huston Rocket"}, "q2": {"question": "'Namaste' is a traditional greeting in which Asian language?", "options": ["Hindi", "Mandarin", "Nepalese", "Thai"], "answer": "Hindi"}, "q3": {"question": "The Spree river flows through which major European capital city?", "options": ["Berlin", "Paris", "Rome", "London"], "answer": "Berlin"}, "q4": {"question": "Which famous artist had both a 'Rose Period' and a 'Blue Period'?", "options": ["Pablo Picasso", "Vincent van Gogh", "Salvador Daly", "Edgar Degas"], "answer": "Pablo Picasso"}}};

let list = document.createElement("ul");
for (let questionId in data["quiz"]) {
let item = document.createElement("node");
let question = document.createElement("strong");
question.innerHTML = questionId + ": " + data["quiz"][questionId]["question"];
item.appendChild(question);
list.appendChild(item);
let sublist = document.createElement("ul");
item.appendChild(sublist);

// The problem is here in this nested loop  

for (let option of data["quiz"][questionId]["options"]) {
item = document.createElement("input");
item.type = "radio";
item.name = data["quiz"][questionId];
var label = document.createElement("label");
label.htmlFor = "options";

// remove 1 
// label.appendChild(document.createTextNode(data["quiz"][questionId]["options"]));

// add 1
label.appendChild(document.createTextNode(option));

var br = document.createElement('br');
sublist.appendChild(item);


// remove 2
//document.getElementById("container").appendChild(label);
//document.getElementById("container").appendChild(br);

// add 2
sublist.appendChild(label);
sublist.appendChild(br);

}





}
document.getElementById("container").appendChild(list);
function results() {
var score = 0;
if (data["quiz"][questionId]["answer"].checked) {
score++;
}
}
// Removed because snippets don't allow localStorage
// localStorage.setItem("answers", "score");

<div id="container"></div>
<input type="submit" name="submit" value="Submit answers" onclick="results()">

Answer 3

这就是你问题的答案。如果您有任何问题，请告诉我。

<div id="container"></div>
<input type="submit" name="submit" value="Submit answers" onclick="results()">
<script>
let data = {
"quiz": {
"q1": {
"question": "Which one is correct team name in NBA?",
"options": ["New York Bulls", "Los Angeles Kings", "Golden State Warriros", "Huston Rocket"],
"answer": "Huston Rocket"
},
"q2": {
"question": "'Namaste' is a traditional greeting in which Asian language?",
"options": ["Hindi", "Mandarin", "Nepalese", "Thai"],
"answer": "Hindi"
},
"q3": {
"question": "The Spree river flows through which major European capital city?",
"options": ["Berlin", "Paris", "Rome", "London"],
"answer": "Berlin"
},
"q4": {
"question": "Which famous artist had both a 'Rose Period' and a 'Blue Period'?",
"options": ["Pablo Picasso", "Vincent van Gogh", "Salvador Daly", "Edgar Degas"],
"answer": "Pablo Picasso"
}
}
};
data = data.quiz;
let list = document.createElement("ul");
for (let questionId in data) {
let item = document.createElement("node");
let question = document.createElement("strong");
let i = Object.keys(data).indexOf(questionId) + 1;
question.innerHTML = "Question" + i + ": " + questionId["question"];
item.appendChild(question);
list.appendChild(item);
let sublist = document.createElement("ul");
item.appendChild(sublist);
for (let option of data[questionId]["options"]) {
item = document.createElement("input");
item.type = "radio";
item.name = questionId;
var label = document.createElement("label");
label.htmlFor = option;
label.appendChild(document.createTextNode(option));
var br = document.createElement('br');
sublist.appendChild(item);
sublist.appendChild(label);
sublist.appendChild(br);
}
}
document.getElementById("container").appendChild(list);
function results() {
var score = 0;
if (data[questionId]["answer"].checked) {
score++;
}
}
//localStorage.setItem("answers", "score");
</script>