hinter_display.html 5.38 KB
Newer Older
1 2 3 4 5
## The hinter module passes in a field called ${op}, which determines which
## sub-function to render.


<%def name="get_hint()">
6
    % if len(hints) > 0:
7
        <h4> Hints from students who made similar mistakes: </h4>
8
        <ul>
9 10 11 12
        % for hint in hints:
            <li> ${hint} </li>
        % endfor
        </ul>
13 14 15 16
    % endif
</%def>

<%def name="get_feedback()">
17
    <%
18
    def unspace(in_str):
19 20 21 22
        """
        HTML id's can't have spaces in them.  This little function
        removes spaces.
        """
23
        return ''.join(in_str.split())
24 25 26 27 28 29 30 31 32 33 34 35 36

    # Make a list of all hints shown.  (This is fed back to the site as pk_list.)
    # At the same time, determine whether any hints were shown at all.
    # If the user never saw hints, don't ask him to vote.
    import json
    hints_exist = False
    pk_list = []
    for answer, pk_dict in answer_to_hints.items():
        if len(pk_dict) > 0:
            hints_exist = True
        for pk, hint_text in pk_dict.items():
            pk_list.append([answer, pk])
    json_pk_list = json.dumps(pk_list)
37 38 39 40
  %>

  <!-- Tells coffeescript whether there are hints to show. -->
  <span id="hints-exist" style="display:none">${hints_exist}</span>
41 42
  <div class="wizard-viewbox"><div class="wizard-container">
    <div class="wizard-view" id="p1">
43
      <p>
44
      <em> Optional. </em> Help us improve our hints!  Which hint was most helpful to you?
45 46
      </p>

47
      <div id="pk-list" data-pk-list='${json_pk_list}' style="display:none"> </div>
48

49 50 51 52 53 54 55 56
      % for answer, pk_dict in answer_to_hints.items():
          % for hint_pk, hint_text in pk_dict.items():
              <p>
              <input class="vote" data-answer="${answer}" data-hintno="${hint_pk}" type="button" value="Vote">
              ${hint_text}
              </p>
          % endfor
      % endfor
57

58 59 60 61 62 63
      <p>
      Don't like any of the hints above? 
      <a class="wizard-link" dest="p2" href="javascript: void(0);">
        Write your own!
      </a></p>
    </div>
64

65 66 67 68 69 70
    <div class="wizard-view" id="p2">
      % if hints_exist:
        <p>
        Choose the incorrect answer for which you want to write a hint:
        </p>
      % else:
71
      <p>
72 73
        <em>Optional.</em>  Help other students by submitting a hint!  Pick one of your previous
        answers for which you would like to write a hint:
74
      </p>
75 76 77 78 79
      % endif
      % for answer in user_submissions:
          <a class="answer-choice" href="javascript: void(0)" value="${answer}">${answer}</a><br />
      % endfor
      % if hints_exist:
80 81 82
        <p class="bottom">
          <a href="javascript: void(0);" class="wizard-link" dest="p1"> Back </a>
        </p>
83
      % endif
84

85 86 87
    </div>

    <div class="wizard-view" id="p3">
88 89

      <p>
90
        Write a hint for other students who get the wrong answer of <span id="blank-answer"></span>.
91
      </p>
92
      <p>Read about <a class="expand" data-target="goodhint" href="javascript:void(0);">what makes a good hint</a>.</p>
Felix Sun committed
93

94
      <textarea cols="50" class="custom-hint" data-answer="${answer}" style="height: 200px">
Felix Sun committed
95
Write your hint here.  Please don't give away the correct answer.
96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129
      </textarea>
      <br /><br />
      <input class="submit-hint" data-answer="${answer}" type="button" value="Submit">
      <div id="goodhint" style="display:none">
        <h4>What makes a good hint?</h4>

        <p>It depends on the type of problem you ran into. For stupid errors --
        an arithmetic error or similar -- simply letting the student you'll be
        helping to check their signs is sufficient.</p>

        <p>For deeper errors of understanding, the best hints allow students to
        discover a contradiction in how they are thinking about the
        problem. An example that clearly demonstrates inconsistency or
        <a href="http://en.wikipedia.org/wiki/Cognitive_dissonance" target="_blank"> cognitive dissonace </a>
        is ideal, although in most cases, not possible.</p>

        <p>
          Good hints either:
          <ul>
            <li> Point out the specific misunderstanding your classmate might have </li>
            <li> Point to concepts or theories where your classmates might have a
            misunderstanding </li>
            <li> Show simpler, analogous examples. </li>
            <li> Provide references to relevant parts of the text </li>
          </ul>
        </p>

        <p>Still, remember even a crude hint -- virtually anything short of
        giving away the answer -- is better than no hint.</p>

        <p>
          <a href="http://www.apa.org/education/k12/misconceptions.aspx?item=2" target="_blank">Learn even more</a>
        </p>
      </div>
130 131 132
      <p class="bottom">
        <a href="javascript: void(0);" class="wizard-link" dest="p2"> Back </a>
      </p>
133 134 135
    </div>
  <!-- Close wizard contaner and wizard viewbox. -->
  </div></div>
136

137

138 139 140
</%def>

<%def name="show_votes()">
141 142 143 144 145 146 147 148 149 150 151
    % if hint_and_votes is UNDEFINED:
      Sorry, but you've already voted!
    % else:
      Thank you for voting!
      <br />
      % for hint, votes in hint_and_votes:
          <span style="color:green"> ${votes} votes. </span>
          ${hint}
          <br />
      % endfor
    % endif
152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169
</%def>

<%def name="simple_message()">
    ${message}
</%def>

% if op == "get_hint":
    ${get_hint()}
% endif

% if op == "get_feedback":
    ${get_feedback()}
% endif

% if op == "submit_hint":
    ${simple_message()}
% endif

170 171 172 173
% if op == "error":
    ${error}
% endif

174 175 176
% if op == "vote":
    ${show_votes()}
% endif
177