This application can be modified in a number of ways. The two obvious extensions I see, however, are making it cheat-proof by performing the grading on the server, and changing the application to administer a survey instead of a test.
One of the first things you might have thought after tinkering with the application for a while is, “Users can check the answers by downloading and opening the JavaScript source file.” It would be a pain to go through each question and find the letter, but it can be done.
You can remove the “Peeping Tom” factor by simply not
sending the answers with the application and requiring the user to
submit his or her test results to a server for grading. We
won’t get into grading the test on the server, but it
won’t be much more involved than
gradeTest()
. Maybe a little more involved, but the
principles will be the same.
To remove the grading feature and add the server-side submission feature, you’ll need to do the following:
Remove any data representing the answers from the object and array
logic in questions.js
.
Remove gradeTest()
and replace the call to it in
buildQuestion()
with
printResults()
.
Modify printResults()
so that the user can view
his or her answers, and embed the answer data within an HTML form to
send the waiting server.
Remove this.answer
and
this.support
from the question constructor in
question.js
. Change this:
function question(answer, support, question, a, b, c, d) { this.answer = answer; this.support = support; this.question = question; this.a = a; this.b = b; this.c = c; this.d = d; return this; }
to this:
function question(question, a, b, c, d) { this.question = question; this.a = a; this.b = b; this.c = c; this.d = d; return this; }
Notice that variables answer and support have also been removed. Now that you have removed these from the constructor, you can remove them from each call to the new operator in each element of units. In other words, remove the first two arguments from each element in units.
Since the answers and explanations no longer exist, there is no
reason to grade the test or display any results. That means you can
get rid of function gradeTest()
. Just delete lines
66-76 in administer.html
. This also means that
you can get rid of the call to gradeTest()
in
buildQuestion()
at line 40. Actually, you’ll
want to replace it with a call to printResults()
so that the user can see his or her answers and the answers can be
embedded in an HTML form.
Lines 39-42 are changed from this:
if (qIdx == howMany) { gradeTest(); return; }
to this:
if (qIdx == howMany) { printResults(); return; }
printResults()
is where most of the new work
happens. Line 84 in administer.html
currently looks like this:
'<BR><BR><FONT SIZE=4>Here is how you scored: </FONT><BR><BR>';
Change it to this:
'<BR><BR><FONT SIZE=4>Here is how you scored: </FONT><BR><BR>' + '<FORM ACTION="your_server_script_URL" METHOD=POST>';
And replace lines 92-105 with the following:
results += '<INPUT TYPE=HIDDEN NAME="question' + (i + 1) + '" VALUE="' + keeper[i] + '"><B><I><FONT>COLOR=GREEN>You chose ' + keeper[i] + '</I></B></FONT><BR><BR><BR>';
That removes the decision-making portion of the function that determines whether users answered correctly and then displays the appropriate green or red text. Lastly, line 107 currently looks like this:
results += ' </BODY></HTML>';
Change it to this:
results += '<INPUT TYPE=SUBMIT VALUE="Submit"> </FORM></BODY></HTML>';
Those few changes added opening and closing FORM
tags, a uniquely named hidden field with a value of each of
the user’s answers, and a SUBMIT
button. The
FORM
tags and the submit button are static, but
the hidden fields involve a bit more.
Each answer is written as the value of a hidden field, which is named
according to its question number. Iterative variable
i is used to create a unique name for each hidden
field and also associates the proper question number with the proper
user answer. Each time variable i is incremented
in the update portion of the for loop
(i++
), a new hidden field can be made. The fields
will follow the pattern of question1,
question2, question3, ad
infinitum.
The changes in printResults()
still display the
questions, four choices, and the user’s answers. The test
isn’t graded, however. All the user has to do is choose
“Submit” to send the answers off for a grading.
Since surveys theoretically don’t have right and wrong answers, converting the application to administer a survey requires the same changes you just saw, plus one more easy one—adjusting the content. Simply change the units elements to reflect survey questions with multiple choice options, and you’re in business. Thanks to the changes above, the user can view the results before he or she sends them in for marketing analysis.
3.144.252.140