<commit_before>{% extends 'ctms_base.html' %}

{% block title %}
Create new courselet
{% endblock %}

{% block content %}
<div class="card">
  <header class="card__topbar">
    <h1>{{ unit.lesson.title }}</h1>
  </header>

  <!-- TODO: We don't need this if when new and edit are separate views -->
  {% if pk %}
    <nav class="card__nav">
      <ul>
        <li>
          <a href="{% url 'ctms:unit_edit' course_pk=course.id courslet_pk=courslet.id pk=pk %}" class="card__nav-active">Edit</a>
        </li>

        <li>
          <a href="{% url 'ctms:unit_view' course_pk=course.id courslet_pk=courslet.id pk=pk %}">Answers</a>
        </li>

        <li>
          <a href="{% url 'ctms:unit_settings' course_pk=course.id courslet_pk=courslet.id pk=pk %}">Settings</a>
        </li>
      </ul>
    </nav>
  {% endif %}

  <main class="card__content">
    <form action="{% url 'ctms:unit_edit' course_pk=course.id courslet_pk=courslet.id pk=pk %}" method="POST">
      <!--TODO: {# post data and redirect to {% url 'ctms:add_unit_edit' course_pk=course.id courslet_pk=courslet.id pk=pk %} #}-->

      {% csrf_token %}

      {{ errors_formset.management_form }}

        <!-- Name -->
        <div class="form-group">
          <label for="{{ form.title.auto_id }}">Thread Name</label>

          <p>
            Give your thread a descriptive name. This will show up as a thread in your students sidebar.
          </p>
          <div class="expandable">
            <a class="expandable__toggle" href="#">How to name a thread</a>

            <div class="expandable__content">
              <p style="margin-top: 12px; padding-left: 24px; color: #7F7F7F">
                <b>Choose a name that's short</b> -- a few words -- and <b>distinct</b> -- that helps students easily recognize this question within the list shown in the sidebar.  For example, if your courselet presented questions about probability, and this question was the only one that featured trains (as an example), you could name it something like "Two Trains".  Don't try to make the name a summary of what the question's asking -- that will be too long.
              </p>
            </div>
          </div>

          {{ form.title }}
          {% if form.title.errors %}
            {{ form.title.errors }}
          {% endif %}
          <!-- <input type="text"> -->
        </div>



        <!-- Unit type -->
        <div class="form-group">
          <label for="{{ form.unit_type.auto_id }}">Thread Type</label>

          <p>{{ form.unit_type.help_text }}</p>

          <div class="radio-list">
            {{ form.unit_type }}
          </div>
          {% if form.unit_type.errors %}
            {{ form.unit_type.errors }}
          {% endif %}
        </div>



        <!-- TODO: Introduction and question should be separate inputs, form.text is currently displayed twice -->
        <!-- Introduction -->
        <div class="form-group form-group--introduction">
          <label for="{{ form.text.auto_id }}">Introduction</label>

          <p>
            Write your introduction here. You can use <a href="http://www.sphinx-doc.org/en/master/usage/restructuredtext/basics.html" target="_blank">ReStructuredText</a> to format your text.

            <span class="expandable">
              <a class="expandable__toggle" href="#">How to write a good introduction</a>

              <span class="expandable__content">
                <br> Add a longer description here.
              </span>
            </span>
          </p>

        </div>



        <!-- Question -->
        <div class="form-group form-group--question">
          <label for="{{ form.text.auto_id }}">Question</label>

          <p>
            Write your question here. You can use <a href="http://www.sphinx-doc.org/en/master/usage/restructuredtext/basics.html" target="_blank">ReStructuredText</a> to format your text.
          </p>
          <div class="expandable">
            <a class="expandable__toggle" href="#"><span>How to write a good question</a></span>

            <div class="expandable__content">
              <ul style="margin-top: 12px; padding-left: 24px; color: #7F7F7F">
                <li><b>Take a real-world situation</b> that's representative of how you think students should be able to apply a concept you've taught, but different from examples you've already shown them how to solve.</li>
                <li><b>Focus your question</b> small enough that students only need to think about that one concept.</li>
                <li><b>Difficulty:</b> thinking about that concept should lead pretty directly to the answer, without requiring other skills such as solving equations, but it should not be guessable.  In general, about 1/3 to 2/3 of your students should be able to do it.</li>
                <li><b>Ask for a definite, specific answer</b>, so that it's easy for students to self-assess whether their answer is right, by comparison with your answer.</li>
                <li><b>Also ask students to briefly explain their reasoning</b> for how they arrived at their answer, so that you'll be able to discover underlying misconceptions directly from students' responses.</li>
                <li><b>Keep your question SHORT, like a real chat</b> conversation.  If it seems too long, use various ways to split it into smaller pieces: <b>background explanations</b> should be moved to a separate Introduction thread; <b>state your question briefly</b>, even if you're concerned some students may need <b>additional clarifications:</b> provide those separately in an embedded audio or video clip.</li>
              </ul>
            </div>
          </div>

        </div>

        {{ form.text }}
        {% if form.text.errors %}
          {{ form.text.errors }}
        {% endif %}

        <!-- Answer -->
        <div class="form-group form-group--answer">
          <label for="{{ answer_form.answer.auto_id }}">{{ answer_form.answer.label }}</label>

          <p>
            Write your answer here. You can use <a href="http://www.sphinx-doc.org/en/master/usage/restructuredtext/basics.html" target="_blank">ReStructuredText</a> to format your text.
          </p>
          <div class="expandable">
            <a class="expandable__toggle" href="#"><span>How to write a good answer</a></span>

            <div class="expandable__content">
              <ul style="margin-top: 12px; padding-left: 24px; color: #7F7F7F">
                <li><b>First provide a clear, brief statement</b> of the definite, specific answer, so students can easily see whether their own answer was right.</li>
                <li><b>Then give a brief explanation</b> of the logic showing how the concept leads to this conclusion, so that students get a second chance to see whether their thinking was correct.</li>
                <li><b>Don't warn about potential wrong ways</b> of thinking; save that for the Error Models (see below).</li>
                <li><b>Keep your answer brief</b> by only including the core points sufficient for most students.</li>
                <li><b>For students who need additional explanations</b>, provide those separately in an embedded audio or video clip.</li>
              </ul>
            </div>
          </div>

          {{ answer_form.answer }}
          {% if answer_form.answer.errors %}
            {{ answer_form.answer.errors }}
          {% endif %}
        </div>



        <!-- Error models -->
        <div class="form-group form-group--error-models">
          <label>Error Models <span>– optional</span></label>

          <p>
            An error model explains a common misconception. Your students can select error models when they self-assess.
          </p>
          <div class="expandable">
            <a class="expandable__toggle" href="#"><span>How to write a good error model</a></span>

            <div class="expandable__content">
              <ul style="margin-top: 12px; padding-left: 24px; color: #7F7F7F">
                <li><b>Write a one-sentence statement</b> of this point-of-view in the form "I thought...", as its title, e.g. "I thought all that glitters is gold."</li>
                <li><b>Explain the misconception:</b> outline the thought process that produces this point of view, and point out exactly where exactly it goes wrong vs. the correct understanding.</li>
                <li><b>Identify precisely what the student must change</b>, to use this concept correctly.</li>
                <li><b>For students who need additional explanations</b> (e.g. a counter-example where this belief leads to an obviously absurd conclusion), provide those separately in an embedded audio or video clip.</li>
              </ul>
            </div>
          </div>

          {% if errors_formset %}
            <div class="error-models-form">

              <div class="error-models-form__items">
                {% for item_form in errors_formset %}
                  <div id="item-{{ forloop.counter0 }}">
                    <!--{#{ item_form.as_p }#}-->
                    {% for field in item_form %}
                      {% if field.is_hidden %}
                        {{ field }}
                      {% else %}
                        <label for="{{ field.auto_id }}">{{ field.label }}</label>
                        {{ field }}
                        {% if field.errors %}
                          {{ field.errors }}
                        {% endif %}
                      {% endif %}
                    {% endfor %}
                    {# <!-- or for crispy forms --> {% crispy item_form %} #}
                    <a href="#" class="error-models-form__remove">Remove error model</a>

                    {% if course_pk and courslet and item_form.ul_id.value %}
                      <div class="alert alert-info">
                        <a class="edit-resolutions" href="{% url 'ct:resolutions' course_id=course_pk unit_id=courslet.unit.id ul_id=item_form.ul_id.value %}">Switch to the old Instructor UI</a> if you want to add resolutions.
                      </div>
                    {% endif %}
                  </div>
                {% endfor %}
              </div>

              <a href="#" class="button error-models-form__add">Add Error Model</a>
            </div>
          {% endif %}
        </div>

        <!-- Add unit aborts from the legacy interface -->
        <div class="form-group form-group--unit-aborts">
          <label>Add unit aborts </label>
          <p>
            Enabling unit aborts provide your students with possibility to see other students' general misconceptions.
          </p>
          {{ form.add_unit_aborts }}
        </div>

      <!-- Submit -->
      <input type="submit" value="Save">
    </form>
  </main>
</div>
{% endblock %}

{% block js %}
  <script>
    // Courselets namespace
    var Courselets = Courselets || {};

    // Toggles inputs visibility based on unit type
    Courselets.updateUnitType = function() {
      // Get current unit type
      var unitType = $("input[name=unit_type]:checked").val();

      // Question
      if(unitType === "{{ unit.lesson.ORCT_QUESTION }}") {
        $(".form-group--question, .form-group--answer, .form-group--error-models").show();
        $(".form-group--introduction").hide();
        $(".form-group--unit-aborts").show();
      // Introduction
      } else if(unitType === "{{ unit.lesson.EXPLANATION }}") {
        $(".form-group--introduction").show();
        $(".form-group--question, .form-group--answer, .form-group--error-models").hide();
        $(".form-group--unit-aborts").hide();
      }
    };

    // Init the form once the document is ready
    $(function(){
      // Update form based on the current unit type
      Courselets.updateUnitType();

      // Listen to unit type changes
      $("input[name='unit_type']").on('change', function(){
        Courselets.updateUnitType();
      });

      // Listen to new error model button
      $('.error-models-form__add').on('click', function(e) {
        e.preventDefault();

        // Add new error model inputs
        var count = $('.error-models-form__items').children().length;
        var tmplMarkup = $('#item-template').html();
        var compiledTmpl = tmplMarkup.replace(/__prefix__/g, count);
        $('.error-models-form__items').append(compiledTmpl);

        // Update form count
        $('#id_form-TOTAL_FORMS').attr('value', count+1);

        // Animate scroll to the new form
        $('html, body').animate({
          scrollTop: $('.error-models-form__items div:last-of-type').offset().top - 84
        }, 800);
      });

      $('.error-models-form__remove').on('click', function(e) {
        var me = $(this);
        me.siblings('input[id*="-DELETE"]').val('on');
        me.closest('form').submit();
        e.preventDefault();
      });

      $('.edit-resolutions').on('click', function (e) {
          var form = $(this).closest('form');
          var action = form.attr('action');
          e.preventDefault();
          $.ajax({
              url: action,
              type: 'POST',
              data: form.serializeArray(),
              async: false,
              success: function (response) {
                  window.location.href = $(e.currentTarget).attr('href');
              }
          });
      });
    });
  </script>

  <!-- Error model template -->
  <script type="text/html" id="item-template">
    <div id="item-__prefix__">
      <!--{#{ errors_formset.empty_form.as_p }#}-->

      {% for field in errors_formset.empty_form %}
        {% if field.is_hidden %}
          {{ field }}
        {% else %}
          <label for="{{ field.auto_id }}">{{ field.label }}</label>
          {{ field }}
        {% endif %}
      {% endfor %}
      <!-- crispy: {#% crispy item_forms.empty_form item_forms.form.helper %#} -->
    </div>
  </script>
{% endblock %}
<commit_msg>CR-223: Update title of unit_edit page<commit_after>{% extends 'ctms_base.html' %}

{% block title %}
Courselet
{% endblock %}

{% block content %}
<div class="card">
  <header class="card__topbar">
    <h1>{{ unit.lesson.title }}</h1>
  </header>

  <!-- TODO: We don't need this if when new and edit are separate views -->
  {% if pk %}
    <nav class="card__nav">
      <ul>
        <li>
          <a href="{% url 'ctms:unit_edit' course_pk=course.id courslet_pk=courslet.id pk=pk %}" class="card__nav-active">Edit</a>
        </li>

        <li>
          <a href="{% url 'ctms:unit_view' course_pk=course.id courslet_pk=courslet.id pk=pk %}">Answers</a>
        </li>

        <li>
          <a href="{% url 'ctms:unit_settings' course_pk=course.id courslet_pk=courslet.id pk=pk %}">Settings</a>
        </li>
      </ul>
    </nav>
  {% endif %}

  <main class="card__content">
    <form action="{% url 'ctms:unit_edit' course_pk=course.id courslet_pk=courslet.id pk=pk %}" method="POST">
      <!--TODO: {# post data and redirect to {% url 'ctms:add_unit_edit' course_pk=course.id courslet_pk=courslet.id pk=pk %} #}-->

      {% csrf_token %}

      {{ errors_formset.management_form }}

        <!-- Name -->
        <div class="form-group">
          <label for="{{ form.title.auto_id }}">Thread Name</label>

          <p>
            Give your thread a descriptive name. This will show up as a thread in your students sidebar.
          </p>
          <div class="expandable">
            <a class="expandable__toggle" href="#">How to name a thread</a>

            <div class="expandable__content">
              <p style="margin-top: 12px; padding-left: 24px; color: #7F7F7F">
                <b>Choose a name that's short</b> -- a few words -- and <b>distinct</b> -- that helps students easily recognize this question within the list shown in the sidebar.  For example, if your courselet presented questions about probability, and this question was the only one that featured trains (as an example), you could name it something like "Two Trains".  Don't try to make the name a summary of what the question's asking -- that will be too long.
              </p>
            </div>
          </div>

          {{ form.title }}
          {% if form.title.errors %}
            {{ form.title.errors }}
          {% endif %}
          <!-- <input type="text"> -->
        </div>



        <!-- Unit type -->
        <div class="form-group">
          <label for="{{ form.unit_type.auto_id }}">Thread Type</label>

          <p>{{ form.unit_type.help_text }}</p>

          <div class="radio-list">
            {{ form.unit_type }}
          </div>
          {% if form.unit_type.errors %}
            {{ form.unit_type.errors }}
          {% endif %}
        </div>



        <!-- TODO: Introduction and question should be separate inputs, form.text is currently displayed twice -->
        <!-- Introduction -->
        <div class="form-group form-group--introduction">
          <label for="{{ form.text.auto_id }}">Introduction</label>

          <p>
            Write your introduction here. You can use <a href="http://www.sphinx-doc.org/en/master/usage/restructuredtext/basics.html" target="_blank">ReStructuredText</a> to format your text.

            <span class="expandable">
              <a class="expandable__toggle" href="#">How to write a good introduction</a>

              <span class="expandable__content">
                <br> Add a longer description here.
              </span>
            </span>
          </p>

        </div>



        <!-- Question -->
        <div class="form-group form-group--question">
          <label for="{{ form.text.auto_id }}">Question</label>

          <p>
            Write your question here. You can use <a href="http://www.sphinx-doc.org/en/master/usage/restructuredtext/basics.html" target="_blank">ReStructuredText</a> to format your text.
          </p>
          <div class="expandable">
            <a class="expandable__toggle" href="#"><span>How to write a good question</a></span>

            <div class="expandable__content">
              <ul style="margin-top: 12px; padding-left: 24px; color: #7F7F7F">
                <li><b>Take a real-world situation</b> that's representative of how you think students should be able to apply a concept you've taught, but different from examples you've already shown them how to solve.</li>
                <li><b>Focus your question</b> small enough that students only need to think about that one concept.</li>
                <li><b>Difficulty:</b> thinking about that concept should lead pretty directly to the answer, without requiring other skills such as solving equations, but it should not be guessable.  In general, about 1/3 to 2/3 of your students should be able to do it.</li>
                <li><b>Ask for a definite, specific answer</b>, so that it's easy for students to self-assess whether their answer is right, by comparison with your answer.</li>
                <li><b>Also ask students to briefly explain their reasoning</b> for how they arrived at their answer, so that you'll be able to discover underlying misconceptions directly from students' responses.</li>
                <li><b>Keep your question SHORT, like a real chat</b> conversation.  If it seems too long, use various ways to split it into smaller pieces: <b>background explanations</b> should be moved to a separate Introduction thread; <b>state your question briefly</b>, even if you're concerned some students may need <b>additional clarifications:</b> provide those separately in an embedded audio or video clip.</li>
              </ul>
            </div>
          </div>

        </div>

        {{ form.text }}
        {% if form.text.errors %}
          {{ form.text.errors }}
        {% endif %}

        <!-- Answer -->
        <div class="form-group form-group--answer">
          <label for="{{ answer_form.answer.auto_id }}">{{ answer_form.answer.label }}</label>

          <p>
            Write your answer here. You can use <a href="http://www.sphinx-doc.org/en/master/usage/restructuredtext/basics.html" target="_blank">ReStructuredText</a> to format your text.
          </p>
          <div class="expandable">
            <a class="expandable__toggle" href="#"><span>How to write a good answer</a></span>

            <div class="expandable__content">
              <ul style="margin-top: 12px; padding-left: 24px; color: #7F7F7F">
                <li><b>First provide a clear, brief statement</b> of the definite, specific answer, so students can easily see whether their own answer was right.</li>
                <li><b>Then give a brief explanation</b> of the logic showing how the concept leads to this conclusion, so that students get a second chance to see whether their thinking was correct.</li>
                <li><b>Don't warn about potential wrong ways</b> of thinking; save that for the Error Models (see below).</li>
                <li><b>Keep your answer brief</b> by only including the core points sufficient for most students.</li>
                <li><b>For students who need additional explanations</b>, provide those separately in an embedded audio or video clip.</li>
              </ul>
            </div>
          </div>

          {{ answer_form.answer }}
          {% if answer_form.answer.errors %}
            {{ answer_form.answer.errors }}
          {% endif %}
        </div>



        <!-- Error models -->
        <div class="form-group form-group--error-models">
          <label>Error Models <span>– optional</span></label>

          <p>
            An error model explains a common misconception. Your students can select error models when they self-assess.
          </p>
          <div class="expandable">
            <a class="expandable__toggle" href="#"><span>How to write a good error model</a></span>

            <div class="expandable__content">
              <ul style="margin-top: 12px; padding-left: 24px; color: #7F7F7F">
                <li><b>Write a one-sentence statement</b> of this point-of-view in the form "I thought...", as its title, e.g. "I thought all that glitters is gold."</li>
                <li><b>Explain the misconception:</b> outline the thought process that produces this point of view, and point out exactly where exactly it goes wrong vs. the correct understanding.</li>
                <li><b>Identify precisely what the student must change</b>, to use this concept correctly.</li>
                <li><b>For students who need additional explanations</b> (e.g. a counter-example where this belief leads to an obviously absurd conclusion), provide those separately in an embedded audio or video clip.</li>
              </ul>
            </div>
          </div>

          {% if errors_formset %}
            <div class="error-models-form">

              <div class="error-models-form__items">
                {% for item_form in errors_formset %}
                  <div id="item-{{ forloop.counter0 }}">
                    <!--{#{ item_form.as_p }#}-->
                    {% for field in item_form %}
                      {% if field.is_hidden %}
                        {{ field }}
                      {% else %}
                        <label for="{{ field.auto_id }}">{{ field.label }}</label>
                        {{ field }}
                        {% if field.errors %}
                          {{ field.errors }}
                        {% endif %}
                      {% endif %}
                    {% endfor %}
                    {# <!-- or for crispy forms --> {% crispy item_form %} #}
                    <a href="#" class="error-models-form__remove">Remove error model</a>

                    {% if course_pk and courslet and item_form.ul_id.value %}
                      <div class="alert alert-info">
                        <a class="edit-resolutions" href="{% url 'ct:resolutions' course_id=course_pk unit_id=courslet.unit.id ul_id=item_form.ul_id.value %}">Switch to the old Instructor UI</a> if you want to add resolutions.
                      </div>
                    {% endif %}
                  </div>
                {% endfor %}
              </div>

              <a href="#" class="button error-models-form__add">Add Error Model</a>
            </div>
          {% endif %}
        </div>

        <!-- Add unit aborts from the legacy interface -->
        <div class="form-group form-group--unit-aborts">
          <label>Add unit aborts </label>
          <p>
            Enabling unit aborts provide your students with possibility to see other students' general misconceptions.
          </p>
          {{ form.add_unit_aborts }}
        </div>

      <!-- Submit -->
      <input type="submit" value="Save">
    </form>
  </main>
</div>
{% endblock %}

{% block js %}
  <script>
    // Courselets namespace
    var Courselets = Courselets || {};

    // Toggles inputs visibility based on unit type
    Courselets.updateUnitType = function() {
      // Get current unit type
      var unitType = $("input[name=unit_type]:checked").val();

      // Question
      if(unitType === "{{ unit.lesson.ORCT_QUESTION }}") {
        $(".form-group--question, .form-group--answer, .form-group--error-models").show();
        $(".form-group--introduction").hide();
        $(".form-group--unit-aborts").show();
      // Introduction
      } else if(unitType === "{{ unit.lesson.EXPLANATION }}") {
        $(".form-group--introduction").show();
        $(".form-group--question, .form-group--answer, .form-group--error-models").hide();
        $(".form-group--unit-aborts").hide();
      }
    };

    // Init the form once the document is ready
    $(function(){
      // Update form based on the current unit type
      Courselets.updateUnitType();

      // Listen to unit type changes
      $("input[name='unit_type']").on('change', function(){
        Courselets.updateUnitType();
      });

      // Listen to new error model button
      $('.error-models-form__add').on('click', function(e) {
        e.preventDefault();

        // Add new error model inputs
        var count = $('.error-models-form__items').children().length;
        var tmplMarkup = $('#item-template').html();
        var compiledTmpl = tmplMarkup.replace(/__prefix__/g, count);
        $('.error-models-form__items').append(compiledTmpl);

        // Update form count
        $('#id_form-TOTAL_FORMS').attr('value', count+1);

        // Animate scroll to the new form
        $('html, body').animate({
          scrollTop: $('.error-models-form__items div:last-of-type').offset().top - 84
        }, 800);
      });

      $('.error-models-form__remove').on('click', function(e) {
        var me = $(this);
        me.siblings('input[id*="-DELETE"]').val('on');
        me.closest('form').submit();
        e.preventDefault();
      });

      $('.edit-resolutions').on('click', function (e) {
          var form = $(this).closest('form');
          var action = form.attr('action');
          e.preventDefault();
          $.ajax({
              url: action,
              type: 'POST',
              data: form.serializeArray(),
              async: false,
              success: function (response) {
                  window.location.href = $(e.currentTarget).attr('href');
              }
          });
      });
    });
  </script>

  <!-- Error model template -->
  <script type="text/html" id="item-template">
    <div id="item-__prefix__">
      <!--{#{ errors_formset.empty_form.as_p }#}-->

      {% for field in errors_formset.empty_form %}
        {% if field.is_hidden %}
          {{ field }}
        {% else %}
          <label for="{{ field.auto_id }}">{{ field.label }}</label>
          {{ field }}
        {% endif %}
      {% endfor %}
      <!-- crispy: {#% crispy item_forms.empty_form item_forms.form.helper %#} -->
    </div>
  </script>
{% endblock %}

{'fraction_non_alphanumeric': 0.14402877697841726, 'fraction_numerical': 0.0030575539568345324, 'mean_word_length': 2.0466849315068494, 'pattern_counts': {'":': 0, '<': 475, '<?xml version=': 0, '>': 475, 'https://': 0, 'lorem ipsum': 0, 'www.': 6, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1867802', 'n_tokens_mistral': 8050, 'n_tokens_neox': 7546, 'n_words': 2285}