Not-so-short introduction to HTML questions - Part 1

  • Global Moderator

    This is the part one of the html question series.

    It focuses on the functions used by Maple TA to run HTML question.

    Weighting Relative weighting of the response area w.r.t. other response area's in the given question
    Answer Required field that sets $ANSWER variable. Content is not visible to the students.
    Grading code Maple code used to grade the student attempt. $RESPONSE is set with getResponse() function in Question Javascript.
    Question HTML Area to add HTML code to the response area.
    Keep in mind that HTML blank is loaded as an iframe, therefore it's a good practice to keep all the dependencies in the response area.
    Accessing HTML elements, like div-tags outside the response area, for example in the question text or assignment window, is not advised.
    Question CSS Area to add CSS styling definitions that only are applied to the elements of the HTML blank. The general CSS rules applies, e.g. don't start id's or classes with numbers.
    Question JavaScript Placeholder for javascript code.

    CSS styling:

    CSS rules set inside the HTML response area, apply only to the HTML elements within the response area. Therefore they won't affect the question text or Maple TA own styling.

    HTML tag selector, in this case all paragraphs.

    p {
    color: red;

    Will select all p-tags, for example:

    <p> Hello World! </p>

    Use dot for class selector.

    .myclass {
         color: red;

    For example:

    <div class='myclass'></div>

    Use # for id selector:

    #myid {
        color: red;
    <div id='myid'></div>

    To get all paragraphs with class myid, you can use:

    p.myclass {
        text-align: right;
        color: red;
    <p> Hello World! </p>
    <p class='myclass'> Hello World in red.. </p>

    Multiple style definitions can be placed behind each other:

    p.myclass {
        text-align: right;
        color: red;
    #myid {
        color: red;

    Question JavaScript

    Maple TA requires 3 functions to operate the HTML blank: initialize, setFeedback and getResponse.

    Function initialize is executed every time HTML blank is been loaded, regardless, if the blank is been viewed in the gradebook, inside an assignment or the question preview. This function can be used for setting different parameters, loading the canvas and such. Maple TA call this function with argument 'interactiveMode', that can either be true or false. When false, or 0, blank is been viewed in the gradebook and user shouldn't be able to interact with the question.

    Function getResponse, is called when user is leaving the question. For example, when Grading, Quit-and-Saving or going to a different question in the assignment. Your code should return something that can be used to reconstruct the student's answer. It's up to you to decide what your code returns, but pay attention to the fact that the question is graded by Maple!

    Function setFeedback is executed directly after initialize. Before diving in the arguments of this function, let's recap the different modes a question can be:

    1. Question is been viewed by a student in an assignment for the first time.
    2. Question is been (re-)viewed by a student in an assignment. Student could have answered it, then proceeded to the next question, and came back later to review/change the answer. Keep in mind that the student could have left the question empty while browsing through the questions.
    3. Question is answered, assignment has been submitted and student is reviewing the feedback on the Details Report page or in the Gradebook
    4. Question is loaded in 'correct answer' mode and should show the correct response for the question.

    It's clear that for situation 1, question should start with some "default initial conditions". In situation 2, question should initialise with the previously given response, or some default values if no answer was given. In situation 3, question should show the response of the student, but shouldn't allow anyone to change the answer. And situation 4 should show the correct answer for the question.

    All these scenarios are covered by passing two arguments to the setFeedback function: response and answer.
    Variable answer is set in the Answer field of the HTML blank, see the table above. It can be a String, Number, boolean, object (array) etc. Since the question is graded by Maple, please, use something that Maple can work with. This will make your life easier on the long run. Keep in mind that the Answer is passed ONLY when question is been viewed in the gradebook in the "correct answer" mode (scenario #4). In all other cases it is set to null.
    Variable response is set by getResponse function. Argument can be a string "No answer", when question is loaded for the first time or when student didn't attempt it. In all other cases, we can safely assume that getResponse was called, and that "No answer" will be replaced by your own response data.

    For example:

    function setFeedback(response, answer) {
        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! */
        } else if (answer != null) {
           /* question is viewed in the gradebook. Use variable answer to show the correct answer  */
        } else {
           /* should not occur */


    Below is a checklist of items to keep in mind when creating a HTML question. Please feel free to add more points to the list.

    1. Is the correct answer hardcoded in the javascript part of the question?
    2. Is the grading code hardcoded in the javascript part of the question?
    3. Do your comments give away the correct answer?

    • HTML question is graded with Maple
    • initialize is the first function called by Maple TA
    • student's response should be reconstructed from the response variable (and algorithm variables) in the setFeedback function
    • response is set by getResponse function
    • if question is attempted for the first time response is set to "No answer"
    • if answer is provided to the question, question should show the correct response.
    • never hardcode correct answer in the javascript portion of the question

    At this point, you might be tempted to hardcode the answer to the question in the setFeedback function. This should be avoided! Javascript is running on the client side, in the students browsers. This means that user can access the code of your HTML question. If the 'correct answer' is hardcoded, user could easily use it to cheat on your question. This can be avoided by using answer argument that's only passed when the question is been accessed through the gradebook.

    As a side note, Maple TA prevents right-click in an assignment window, making it harder to access Web Inspector. Additionally, Proctored Browser can be used to kick students out of an assignment who try to open Web Inspector.