Content
- Introduction
- Conceptual aspects
- Technical aspects
- Reference
MCQ using JavaScript
Introduction:
The result presented is actually not that what I wanted to accomplish in the beginning. So, the whole design is basically based on my initial idea (see scetch below). A color bar was planned between the two frames. Each color was to represent a certain knowledge level. When the MCQ is filled out and the result calculated, the background color of the the questionnaire was supposed to change to the pertinent score attained, thus to the testee's knowledge level. Based on this idea, I started out my project and at the time I noticed that its realization may have exceeded my level of current knowledge, I set myself smaller goals to get where I wanted to: a -to a certain extent meaningful- program which takes advantage of some features particular for JavaScript in order to enhance, or at least support some ergonomical operation.
My intention in this exercise was to include those features of JavaScript, I could well imagine to employ in future exercises or projects. The STAF 13 project for instance crossed my mind. The "storyboard" encompassed so many information that it would have been distracting to the reader to subsequently list all the details. JavaScript provides a wonderful tool with the function "window.open" to enhance ergonomy in this case. However, with respect to calculation of the total score, I feel far more comfortable with PHP than with JavaScript. I do not yet see any major advantage in the deployment of "frames" for those kinds of programs I create. Anyway, it has certainly enriched my knowledge in HTML.
Conceptual aspects:
When entering the MCQ page, a window opens indicating the knowledge level of the questionnaire. The MCQ page is subdivided into two frames. The top frame contains the heading, links to relevant sites and my "statusbar messager". It is a message in the window's statusbar below that is triggered when the mouse curser is being moved over the TECFA image and disappears after five seconds. It has no educational purpose with respect to MCQ and therefore is not hinted anywhere in the MCQ. The heading stays put and remains accessible at all times while one scrolls down the questionnaire which is located in the second and bottom frame. All ten questions are RADIO-type and allow to check simply one response. Question 10 provides a help function (textarea) to get to the proper solution. The button "See result" pops up a window stating the total score attained and a feedback on the knowledge level. There are five different feedbacks. The button "Answers" opens up another window. It contains the solution and further details. A link bar at the top allows the direct move to the pertinent solutions. Each solution paragraph has got two icons to either move up to the link bar or down to the button "close". When leaving the MCQ page a window pops up stating the reference book.
Technical aspects:
The commands "onLoad" and "onUnload" in the body-tag trigger the pop-up window when entering or leaving the MCQ page. The statusbar message is an "onMouseOver" combined with a "setTimeout" command. All links in the top frame contain the option "target="_top"" which allows a break-out out of the HTML frames. The calculation of the total score is a simple JS algorythm. I am convinced that I could have done much better in PHP. The command "window.open" stands behind the "Answer" button that in return contains the "window.close" command. A textarea was assigned to question 10 where feedback is displayed. Using Dreamwaver may provide some advantage to master JavaScript. However, I didn't yet feel confident enough. So, this time again, I worked with XEmacs.
Last but not least, the JS IFRAME tag found a place here in the comment. Not listed are all the functions and commands which I unsuccessfully attempted to integrate into my program.
Reference:
TECFA /
Travaux STAF / MCQ using JavaScript / Report
