HTML Question Type in Mobius

under construction 2018

Topics

Introduction
Question Designer type with HTML Question response area
Example 1
Documentation

Introduction

In this question type the author's grading code can access all student responses created within a single HTML Question response area.

What is different about the HTML Question type is that

the question author can create several input areas for student answers and all the answers, as a whole, can be checked at the same time for correctness
more generally, HTML input elements (e.g. <input type="text">, <input type="checkbox">, etc) and Javascript-controlled interactions, like drag-and-drop, can be added to create custom-designed, gradeable questions.

Question Designer type with HTML Question response area

Question Designer parts:

html editor to hold
- question text
- question input box (called a Response area) and its settings
area for algorithmic Maple code
area for CSS code
area for feedback text to student when question is graded

HTML Question type response area (i.e. the question input box) parts:

correct answer (a number, string, set, list, algorithmic variable)
grading code (Maple code that returns real # 0 to 1)
HTML input elements (input boxes) to accept student answers (written in HTML - see example below)
area for CSS code (affects only HTML within the response area HTML iframe element)
javascript code that sets/displays the input box values when the question is displayed in various stages of the question's presentation (e.g. initial presentation to student, returning to the question after viewing a different question in an assignment, seeing the question on after grading)
- 3 required helper javascript functions to complete (all called by the Mobius system):
  - function initialize(interactiveMode)
  - function setFeedback(response, answer)
  - function getResponse()
- any helper javascript functions wanted by author

Each HTML Question type response area is its own HTML iframe element contained within the pages created by the Mobius system.

Role of parameter values response and answer:

  +--------------------------------------------------------------------------------------------+
  |                                'response' parameter values                                 |
  +--------------------------------------------------------------------------------------------+
  |           |          |       "No answer"      |               not "No answer"              |
  +           +----------+------------------------+--------------------------------------------+
  |  'answer' |          | assign initial/default | * unpack values from parameter response    |
  | parameter |   null   | question values        | * assign unpacked values to input elements |
  |   values  |          | to input elements      |                                            |
  +           +----------+------------------------+--------------------------------------------+
  |           | not null | assign correct answers | error: should not happen                   |
  |           |          | to input elements      |                                            |
  +-----------+----------+------------------------+--------------------------------------------+

Example 1

HTML/Text in Question Designer editor
```
  Enter 3 numbers that sum to $N:
```

algorithmic code:

  # # is a comment character
  $N  = range(7,10,1);  
  $a1 = range(1,4,1);
  $a2 = range(1,4,1);
  $a3 = $N - $a1 - $a2;

answer field:
```
  [$a1, $a2, $a3]
```

HTML response area:

  <input type="text" id="inone" name="one"> +
  <input type="text" id="intwo" name="two"> +
  <input type="text" id="inthree" name="three"> = $N

grading code:

  grade := 0.0;
  # subtract 3 input numbers from question total
  sum := $N;
  n := nops($RESPONSE);
  for i from 1 to n do
    r := parse($RESPONSE[i]);
    # grade is 0 if not 3 numbers - check for empty input ()
    if () = r then sum := n; break; end if;
    sum := sum - r;
  end do:
  if sum = 0 then grade := 1.0;
  # grade 50% if close +/-1 of total
  elif sum = 1 or sum = -1 then grade := 0.5;
  end if;
  grade;

javascript code:

  function initialize(interactiveMode){
  /*
  Called when the question is being initialized.
  interactiveMode: if it is true, interaction is allowed on question.
  */
  /* Your code starts from here: */
    if (!interactiveMode) {
      document.getElementById("inone").disabled = true;
      document.getElementById("intwo").disabled = true;
      document.getElementById("inthree").disabled = true;
    }
  
  };
  
  function setFeedback(response, answer){
  /*
  Called when response or answer is going to be rendered.
  response:  student's response to question
  answer:    correct answer to question
  */
  
  /*Your code starts from here:*/
  
   if (response == "No answer" && answer == null) {
      /* student opened question for the first time, begin with the default values */
  
    } else if (answer == null) {
      /* student attempted the question and response has been set. Use response! */
    response = JSON.parse(response);
    document.getElementById("inone").value = response[0];
    document.getElementById("intwo").value = response[1];
    document.getElementById("inthree").value = response[2];
  
    } else if (answer != null) {
      /* question is viewed in the gradebook. Use variable answer to show the correct answer  */
    answer = JSON.parse(answer);
    document.getElementById("inone").value = answer[0];
    document.getElementById("intwo").value = answer[1];
    document.getElementById("inthree").value = answer[2];
  
    } else {
      /* should not occur */
    }
  
  };
  
  function getResponse(){
  /*
  Called when grade button is clicked,
  to capture (from the HTML iframe) 
  and store (with caller) the student's response.
  */
  
  /* Your code starts from here: */
    var r = [];
  
    r.push( document.getElementById("inone").value );
    r.push( document.getElementById("intwo").value );
    r.push( document.getElementById("inthree").value );
  
    return JSON.stringify(r);
  };
  
  /* Additional functions start from here. */

Documentation

Mobius 2017 Online Help: 8.5 HTML Questions
https://www.maplesoft.com/support/help/Mobius/MobiusInstructor/ch08s05.aspx

Mobius 2017 Instructor documentation:
http://www.maplesoft.com/support/help/Mobius/index.aspx

Contact

Paul Kates
Mathematics Faculty CTE Liaison
pkates@uwaterloo.ca, x37047
Last modification date: Wed May 30 16:21:55 2018.