Home | Travaux STAF | STAF14 - Report for exercise 3 STAF-E


for Quiz Functions & Graphs


The Scenario
Technical details-problems
References - Bibliography

It is a quiz about functions and graphs as the title says. The level is college algebra. The idea is to test the learner's ability to "read" a graph and study a function merely by looking it's graph.
Having a small experience in teaching college algebra, I have realized the crucial role of graphs in teaching functions. A graph, by being a visual representation of a function, help the student understand the meaning of the abstract formulas as long as he knows how to read one.
That's the reason I decided to create a quiz on this domain. I chose carefully the questions. Each one, is like a piece of a puzzle that coming all together describe a function totally.
Before starting the realisation of this idea, I made a research on the web to see others work with similar subject. Each one has contributed his own "wisdom" in the area. I'd like to believe that my quiz has:


The scenario
Introduction page: At first, the user sees a "welcome" page with a short description for the quiz what it is about, let's say an introduction. It is exactly there where I put a blinking warning for the version needed to run the quiz to prevent the user from surprises. From this page with the aid of a button called "start the quiz now" the user can enter to the quiz area...


Immediately after pressing this button the quiz is being loaded and an alert message asks for the users name. This alert message insists (endless loop) until it gets a kind of name. It doesn't accept also spaces as characters. By the time the user gives a proper name he receives another alert message that welcomes him by it's name to the quiz and gives some final details, before starting, about the procedure.

At this exact point is where I have created a layer that includes all the information for each question and the page footer. The user can see now the first question. He can easily understand it by a label (Question x out of total) that shows the number of current question out of the total number of questions. This is updated in each question respectively.

In the same page, there is the quiz question, 3 answers of multiple choice type (radio buttons), an image with the respective graph and a hint button. The "hint" button came as an idea from a site on the web (completely different presented though) but it fitted perfectly both educationally and with source code. It is a simple alert message that the user is freely to use it (but it's completely up to him).

Feedback window:

Now, by choosing an answer, another window called "feedback window" opens and gives the according feedback while the next question is being loaded. According to his answer he gets a red "cross" gif for wrong answers and a green "tick" gif for correct ones followed by a blinking "wrong or "correct". That way, he distinguishes easier correct from wrong answers. In both cases, it follows the same graph presented in the question but with explaining details added on it and a brief theory of the domain. And of course, there is a button that closes this window.

Like that, he can proceed to the next question that is already waiting in the main window of the browser until the user reaches the last question.

Results page:

He then receives comments about his performance, like score and how many times he used hints during the quiz followed by several links with mathematical sites with relevant theme.

The navigation bar that is present during the quiz makes it easy to quit or start all over again whenever the user wants easily. Things that deserve to be mentioned specificaly:


Technical details - problems


HTML documents have been written on Emacs.
The debugging has been done with the Javascript debugger through Netscape browser.
Graphs have been made using PAW and details have been added to them to become feedback graphs using PaintShopPro.


Supporting my idea for showing one question at a time and an immediate feedback I stuck again in technical details. As I was (and still are) a novice in Javascript I spent quite some time in finding a way to realize my idea.
I came across with LAYERS that fitted perfectly with my idea. Eventhough that ILAYER (inline layer) had a lot of problems. Of course, it might well be another way or ways to implement the same scenario. But learning Javascript the same time with creating something with it sometimes complicate things.
In fact, LAYERS are quite new and they made my life difficult in finding documentation about them. Even inside the official Javascript site of Netscape there aren't a lot of details in using them.
But, I'm really happy -even proud- with the result, eventhough there are a lot of things that could have been done differently (perhaps a better looking source code for example) if I had known already Javascript.


References - Bibliography - Sites


Back to "Travaux" page

© Vivian Synteta (18/02/99)