edx-platform/common/templates/hinter_display.html

## The hinter module passes in a field called ${op}, which determines which
## sub-function to render.


<%def name="get_hint()">
    % if len(hints) > 0:
        <h4> Hints from students who made similar mistakes: </h4>
        <ul>
        % for hint in hints:
            <li> ${hint} </li>
        % endfor
        </ul>
    % endif
</%def>

<%def name="get_feedback()">
    <%
    def unspace(in_str):
        """
        HTML id's can't have spaces in them.  This little function
        removes spaces.
        """
        return ''.join(in_str.split())

    # 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)
  %>

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

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

      % 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

      <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>

    <div class="wizard-view" id="p2">
      % if hints_exist:
        <p>
        Choose the incorrect answer for which you want to write a hint:
        </p>
      % else:
      <p>
        <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:
      </p>
      % endif
      % for answer in user_submissions:
          <a class="answer-choice" href="javascript: void(0)" value="${answer}">${answer}</a><br />
      % endfor
      % if hints_exist:
        <p class="bottom">
          <a href="javascript: void(0);" class="wizard-link" dest="p1"> Back </a>
        </p>
      % endif

    </div>

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

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

      <textarea cols="50" class="custom-hint" data-answer="${answer}" style="height: 200px">
Write your hint here.  Please don't give away the correct answer.
      </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>
      <p class="bottom">
        <a href="javascript: void(0);" class="wizard-link" dest="p2"> Back </a>
      </p>
    </div>
  <!-- Close wizard contaner and wizard viewbox. -->
  </div></div>


</%def>

<%def name="show_votes()">
    % 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
</%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

% if op == "error":
    ${error}
% endif

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