使用 CF/Javascript/HTML 随机化显示来自数据库的 MC 答案的顺序答案

【问题标题】：Randomizing the order in which MC answers from a DB are displayed, using CF/Javascript/HTML使用 CF/Javascript/HTML 随机化显示来自数据库的 MC 答案的顺序
【发布时间】：2011-05-26 15:06:38
【问题描述】：

今天我正在尝试使用 ColdFusion、HTML 和 Javascript 改进 Jeopardy 风格的游戏。就目前而言，游戏导航到一个问题页面，该页面显示问题以及一个答案框，供用户输入他们的回答。我们正在尝试将其更改为多项选择测验。

我想要实现的主要目标是让三个可能的答案以随机顺序显示。游戏从中提取的数据库有 4 个与此相关的属性，如下所示：

MC_Question

MC_CorrectAnswer

MC_IncorrectAnswer1

MC_IncorrectAnswer2

我希望显示问题页面/弹出窗口：

MC_Question

随机选择的答案1

随机选择的答案2

随机选择的答案3

提交按钮

我创建了一个很小的 html，其中包含一些随机生成的数字，这可能会让您更好地了解我要在哪里使用它。

<HTML>
<HEAD>
<TITLE>Question</TITLE>
<script>
    var num=Math.floor(Math.random()*3); 

    var num1=Math.floor(Math.random()*3); 
    do{
    num1=Math.floor(Math.random()*3); 
    }while (num == num1) 

    var num2=Math.floor(Math.random()*3); 
    do{
    num2=Math.floor(Math.random()*3); 
    }while (num == num2 || num1 == num2)
</script>
</HEAD>
<BODY>
<H1>Question here!</H1>
<P>
<FORM>
    <INPUT type="radio" name = "Answer" value="num" />
    <script>document.write("Answer " + num);</script><br />

    <INPUT type="radio" name = "Answer" value="num1" />
    <script>document.write("Answer " + num1);</script><br />

    <INPUT type="radio" name = "Answer" value="num2" />
    <script>document.write("Answer " + num2);</script><br />
    <br>
    <input type="submit" value="Submit" />
</FORM>
</BODY>
</HTML>

我的问题是：如何将我的数据库答案与我随机生成的数字联系起来以混合答案？在上面的示例代码中，答案 0 将等于 MC_CorrectAnswer，而答案 1 和 2 将是不正确的。稍后我会担心提交的内容等 - 现在我只想让表单显示从数据库中提取的问题和答案。

我对 Javascript 和 CF 非常陌生，非常感谢您的任何意见。如果我以完全错误的方式处理此问题，请告诉我。

我还查看了这个 Q 和 A，为了解决这个问题，我想说的是，我很高兴为答案创建一个单独的表格，如有必要，带有不正确/正确的标志等，但是什么我真的在这里寻找的是前端代码和逻辑来随机化我在页面上的问题。后端的好东西甚至还不存在。

Randomizing -and remembering that randomisation- multiple choice questions in php

非常感谢您的时间和专业知识！

【问题讨论】：

标签： javascript html coldfusion multiple-choice

【解决方案1】：

使用java.util.Collections.shuffle(list)。

<!--- simulate a database <cfquery>SELECT id, answer FROM answers</cfquery> call --->
<cfset answers = QueryNew("id,answer","integer,varchar")>
<cfloop from="1" to="3" index="idx">
    <cfset queryAddRow(answers)>
    <cfset querySetCell(answers, "id", idx)>
    <cfset querySetCell(answers, "answer", "Answer #idx#")>
</cfloop>

<cfset rownumbers = []>
<cfloop from="1" to="#answers.recordcount#" index="rowNumber">
    <cfset arrayAppend(rowNumbers, rowNumber)>
</cfloop>

<cfset createObject("java", "java.util.Collections").shuffle(rowNumbers)>

<cfdump var="#rowNumbers#">

<cfoutput>
<body>
<h1>Question here!</h1>
<p>
<form>
    <cfloop array="#rowNumbers#" index="rowNumber">
        <input type="radio" name="answerId" value="#answers.id[rowNumber]#" />#answers.answer[rowNumber]#<br />
    </cfloop>
</form>
</body>
</cfoutput>

【讨论】：

非常感谢！我会仔细研究一下，并尽我所能充分了解正在发生的一切，但我非常感谢你抽出时间来回答！

【解决方案2】：

orangepips 解决方案应该可以正常工作。或者，您可以随机选择答案。具体如何取决于您使用的数据库。

【讨论】：