Randomizing the order in which MC answers from a DB are displayed, using CF/Javascript/HTML
Today I’m trying to improve a Jeopardy-style game for work using ColdFusion, HTML, and Javascript. As it stands now, the game navigates to a question page which displays the question along with an answer box for the user to type in their response. We’re trying to change this to a multiple-choice quiz, instead.
The main thing I want to achieve is to have the three possible answers be displayed in random order. The database that the game pulls from has 4 attributes relevant to this, as follows:
MC_Question
MC_CorrectAnswer
MC_IncorrectAnswer1
MC_IncorrectAnswer2
I want the question page/popup to display:
MC_Question
Randomly selected Answer1
Randomly selected Answer2
Randomly selected Answer3
Submit button
I’ve created a teensy little bit of html with some randomly generated numbers that might give you a better idea of where I’m trying to go with this.
<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>
</HEA开发者_如何学运维D>
<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>
My question is this: how do I tie my database answers into my randomly generated numbers to mix up the answers? In the example code above, Answer 0 would equal MC_CorrectAnswer, and answers 1 and 2 would be the incorrect ones. I’ll worry about the submission stuff etc. later- for now I just want the form to display the question and answers pulled from the DB.
I’m very new to Javascript and CF, and any input you have is greatly appreciated. If I’m going about this in completely the wrong way, please let me know.
I also took a look at this Q and A, and to address that I’d like to say that I’m happy to create a separate table for answers, with incorrect/correct flags, etc, if necessary, but what I’m really looking for here is the front-end code and logic to randomize my questions on the page. The back-end goodies don’t even exist yet.
Randomizing -and remembering that randomisation- multiple choice questions in php
Thanks so much for your time and expertise!
Use 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>
orangepips solution should work fine. Alternatively, you can select the answers in random order. Exactly how will depend on the database you're using.
精彩评论