我昨天发布了这个问题，但删除了，因为我必须修复我的代码，使它更加整洁。但是对于我的任务，我必须在JavaScript中进行测验，但我也必须这样做，以便每当用户重新参加测验时，问题和答案选项都会被洗牌，这意味着不同的顺序。我之前在网站上看过这个例子，但是他们把选择和问题放在数组中，我做了没有数组的测验。还有办法吗？谢谢。
这是JS代码（我不能把它放在JSFiddle中，因为它说代码需要是纯JS）：
function gradeTest() {
//variables with global implications
var totalPoints = 18;
var numberOfPoints = 0;
var numberofQuestions = 0;
var alertText;
var i;
function multipleChoice(idOfQuestion, answer, idOfText) {
var select = document.getElementsByName(idOfQuestion);
for(i = 0; i < select.length; i++) {
if(select[i].checked) {
if(select[i].value == answer) {
numberOfPoints++;
numberofQuestions++;
changeColor(1, idOfText);
break;
}
} else { changeColor(0, idOfText) }
}
}
var a1 = document.getElementById('q1').value.toLowerCase();
if(a1 == '<script>') {
numberOfPoints = numberOfPoints + 2;
numberofQuestions++;
changeColor(1, 's1');
} else { changeColor(0, 's1') }
var a2 = document.getElementById('q2').value.toLowerCase();
if(a2 == '//') {
numberOfPoints = numberOfPoints + 2;
numberofQuestions++;
changeColor(1, 's2');
} else { changeColor(0, 's2') }
multipleChoice('q3','false','b1')
multipleChoice('q4','true','b2')
multipleChoice('q5','false','b3')
multipleChoice('q6','true','b4')
multipleChoice('q7','popup','m1')
multipleChoice('q8','false','m2')
multipleChoice('q9','2','m3')
multipleChoice('q10','10','m4')
multipleChoice('q11','inner','m5')
multipleChoice('q12','11','m6')
multipleChoice('q13','5','m7')
multipleChoice('q14','slash','m8')
multipleChoice('q15','no','m9')
multipleChoice('q16','11','m10')
if(numberOfPoints == totalPoints) {
alertText = "Congratulations! You got all the questions right!";
}
else {
if(numberOfPoints > 5) {
alertText = "You got " + numberOfPoints + " out of " + totalPoints + " possible points! You also got " + numberofQuestions + " right!";
}
else {
alertText = "You got " + numberOfPoints + " out of " + totalPoints + " correct. And that means you got " + numberofQuestions + " right.... Know your javascript more..."; } }
alert(alertText);
}
这是HTML代码：
<form id="test">
<table border="1" cellspacing="0" cellpadding="5" class="table">
<tr>
<td class="set" id = "s1" name="short">Inside which HTML element do we put the JavaScript?</td>
<td>
<input id="q1" maxlength="30" name="q1" size="30" type="text" /></td>
</tr>
<tr>
<td class="set" id = "s2" name="short">What do you use for line comments?</td>
<td>
<input id="q2" maxlength="30" name="q2" size="30" type="text" /></td>
</tr>
<tr>
<td class="set" id = "b1" name="boolean">'document.getElementById' is not a valid Javascript Request.</td>
<td>
<input name="q3" type="radio" value="true" />
True |
<input name="q3" type="radio" value="false" />
False</td>
</tr>
<tr>
<td class="set" id = "b2" name="boolean">Javascript is case-sensitive.</td>
<td>
<input name="q4" type="radio" value="true" />
True |
<input name="q4" type="radio" value="false" />
False</td>
</tr>
<tr>
<td class="set" id = "b3" name="boolean">There is no such Math object in Javascript.</td>
<td>
<input name="q5" type="radio" value="true" />
True |
<input name="q5" type="radio" value="false" />
False</td>
</tr>
<tr>
<td class="set" id = "b4" name="boolean">"1" + 2 + 4 evaluates to "124"</td>
<td>
<input name="q6" type="radio" value="true" />
True |
<input name="q6" type="radio" value="false" />
False</td>
</tr>
<tr> <!-- check -->
<td class="set" id = "m1" name="mult">What does 'alert' do?</td>
<td>
<input name="q7" type="radio" value="popup" />
Creates a popup window based on text. |
<input name="q7" type="radio" value="reminder" />
It sets a reminder. |
<input name="q7" type="radio" value="command" />
It sets an in-built command to alert the user about a certain function being performed. |
<input name="q7" type="radio" value="none" />
None of these</td>
</tr>
<tr>
<td class="set" id = "m2" name="mult">What is the result of '(true + false) > 2 + true;'?</td>
<td>
<input name="q8" type="radio" value="true" />
true |
<input name="q8" type="radio" value="false" />
false |
<input name="q8" type="radio" value="error" />
TypeError |
<input name="q8" type="radio" value="none" />
None of these</td>
</tr>
<tr>
<td class="set" id = "m3" name="mult">What is the result of '"1" - - "1";'?</td>
<td>
<input name="q9" type="radio" value="1" />
1 |
<input name="q9" type="radio" value="2" />
2 |
<input name="q9" type="radio" value="11" />
11 |
<input name="q9" type="radio" value="none" />
None of these</td>
</tr>
<tr>
<td class="set" id = "m4" name="mult">'function() {
var a = 10;
if(a > 5) {
a = 7;
}
alert(a);
}'
What is the value that will be alerted?</td>
<td>
<input name="q10" type="radio" value="7" />
7 |
<input name="q10" type="radio" value="null" />
null |
<input name="q10" type="radio" value="10" />
10 |
<input name="q10" type="radio" value="undefined" />
undefined</td>
</tr>
<tr>
<td class="set" id = "m5" name="mult">What do you use to change HTML?</td>
<td>
<input name="q11" type="radio" value="inner" />
.innerHTML |
<input name="q11" type="radio" value="change" />
.changeHTML |
<input name="q11" type="radio" value="html" />
.HTML |
<input name="q11" type="radio" value="doc" />
.documentChangeHTML</td>
</tr>
<tr>
<td class="set" id = "m6" name="mult">var price1 = 5;<br>
var price2 = 6;<br>
var total = price1 + price2;</td>
<td>
<input name="q12" type="radio" value="11" />
total = 11 |
<input name="q12" type="radio" value="56" />
total = 56 |
<input name="q12" type="radio" value="colon" />
total = 5;6; |
<input name="q12" type="radio" value="none" />
None of The Above</td>
</tr>
<tr>
<td class="set" id = "m7" name="mult">var x = "'ABC'"</td>
<td>
<input name="q13" type="radio" value="3" />
x.length = 3 |
<input name="q13" type="radio" value="5" />
x.length = 5 |
<input name="q13" type="radio" value="22" />
x.length = 22 |
<input name="q13" type="radio" value="none" />
None of The Above</td>
</tr>
<tr>
<td class="set" id = "m8" name="mult">How do you insert special characters into a string in JS?</td>
<td>
<input name="q14" type="radio" value="//" />
// |
<input name="q14" type="radio" value="slash" />
\ |
<input name="q14" type="radio" value="&" />
& |
<input name="q13" type="radio" value="nope" />
You can't.</td>
</tr>
<tr>
<td class="set" id = "m9" name="mult">Can objects be compared?</td>
<td>
<input name="q15" type="radio" value="no" />
No |
<input name="q15" type="radio" value="yes" />
Yes |
<input name="q15" type="radio" value="certain" />
On certain circumstances. |
<input name="q15" type="radio" value="lol" />
Objects don't exist.</td>
</tr>
<tr>
<td class="set" id = "m10" name="mult">What does 'document.write(5 + 6)' place in the HTML page?</td>
<td>
<input name="q16" type="radio" value="11" />
11 |
<input name="q16" type="radio" value="duo" />
5+6 |
<input name="q16" type="radio" value="56" />
56 |
<input name="q16" type="radio" value="error" />
TypeError</td>
</tr>
</table>
<br>
<input onclick="gradeTest()" name="submit" type="button" value="Grade This Test" />
非常感谢。
编辑：需要删除一行代码。它没有任何意义。 编辑：删除了更多代码。
答案 0 :(得分：0)
这是一个JavaScript解决方案，用于对parent元素内的元素进行随机播放，以便按标记名称tr对广告元素进行随机播放。
function getRandom(max) {
return Math.floor(Math.random()*max);
}
function shuffleElements(parentElement, tag) {
var tagsObj = document.getElementsByTagName(tag);
var tags = Array();
//getElementsByTagName gives you an Object, so converting that to Array().
for(var i=0;i<Object.keys(tagsObj).length;i++) {
tags.push(tagsObj[i]);
}
var length = tags.length;
var randomized = Array();
//Randomize the elements of the tags array.
for(var i=0; i<length; i++) {
var random = getRandom(tags.length);
randEl = tags[random];
tags.splice(random,1);
randomized.push(randEl);
}
//Put the randomized elements in the Parent.
document.getElementsByTagName(parentElement)[0].innerHTML = '';
var final = '';
for(var i=0; i<randomized.length; i++) {
final += (randomized[i].outerHTML);
}
document.getElementsByTagName(parentElement)[0].innerHTML = final;
}
因此，您可以使用上述函数随机化表格中的元素，如下所示 -
shuffleElements('table','tr');
以下是您的代码的工作小提琴 - https://jsfiddle.net/jpfdsbhx/1/
PS - 我将代码中的答案从<script>更改为script，以使其与JSFiddle一起运行。