Single Question

Use these to create single non-graded questions inside the print.php documents for LC template based lessons.

Multiple Choice (Radio Type)

---

<div class="panel panel-default interaction-question"> 
  <div class="panel-body">
    <div class="question-wrap radio">
      <h4>Question</h4>
      <p>INSERT QUESTION TEXT HERE</p>
      <form action="#">
        <fieldset>
          <div class="response-group-item"><input id="q01a" name="q01" value="a" type="radio"><label for="q01a"> <strong>a) </strong>Option 1 Incorrect</label></div>
          <div class="response-group-item correct"><input id="q01b" name="q01" value="b" type="radio"><label for="q01b"> <strong>b) </strong>Option 2 Correct</label></div>
          <div class="response-group-item"><input id="q01c" name="q01" value="c" type="radio"><label for="q01c"> <strong>c) </strong>Option 3 Incorrect</label></div>
          <div class="response-group-item"><input id="q01d" name="q01" value="d" type="radio"><label for="q01d"> <strong>d) </strong>Option 4 Incorrect</label></div>
          <input class="submit-button btn btn-primary" name="submit-button" value="Done" type="button">
        </fieldset>
      </form>
      <div class="answer">
        <p class="response">The correct answer is b.</p>
        <p class="explanation">INSERT YOUR FEEDBACK HERE.</p>
      </div>
      <div class="message">Please make a selection.</div>
    </div>
  </div>
</div>

Multiple Select (Checkbox Type)

---

<div class="panel panel-default interaction-question">
  <div class="panel-body">
    <div class="question-wrap checkboxes">
      <h4>Question</h4>
      <p>INSERT QUESTION TEXT HERE</p>
      <form action="#">
        <fieldset>
          <div class="response-group-item correct"><input id="q02a" name="q02" value="a" type="checkbox"><label for="q02a"> <strong>a) </strong>Option 1 Correct</label></div>
          <div class="response-group-item correct"><input id="q02b" name="q02" value="b" type="checkbox"><label for="q02b"> <strong>b) </strong>Option 2 Correct</label></div>
          <div class="response-group-item"><input id="q02c" name="q02" value="c" type="checkbox"><label for="q02c"> <strong>c) </strong>Option 3 Incorrect</label></div>
          <div class="response-group-item"><input id="q02d" name="q02" value="d" type="checkbox"><label for="q02d"> <strong>d) </strong>Option 4 Incorrect</label></div>
          <input class="submit-button btn btn-primary" name="submit-button" value="Done" type="button">
        </fieldset>
      </form>
      <div class="answer">
        <p class="response">The correct answers are a and b.</p>
        <p class="explanation">INSERT YOUR FEEDBACK HERE.</p>
      </div>
      <div class="message">Please make a selection.</div>
    </div>
  </div>
</div>

Text Entry (Textarea Type)

---

<div class="panel panel-default interaction-question">
  <div class="panel-body">
    <div class="question-wrap textentry">
      <h4>Question</h4>
      <p class="question">INSERT QUESTION TEXT HERE</p>
      <form action="#">
        <fieldset>
          <textarea class="textbox" name="textarea01" cols="60" rows="5" id="textarea01"></textarea>
          <br>
          <input class="submit-button btn btn-primary" name="submit-button" value="Done" type="button">
        </fieldset>
      </form>
      <div class="answer">
        <p class="explanation">INSERT YOUR FEEDBACK HERE.</p>
      </div>
    </div>
  </div>
</div>

Drop Down List (Select Type)

---

<div class="panel panel-default interaction-question">
    <div class="panel-body">
        <div class="question-wrap inlinedropdowns">
        <h4>Question</h4>
        <p class="question">INSERT QUESTION TEXT HERE</p>
        <form action="#">
            <fieldset>
                <div class="response-group-item"> <strong>a) </strong>MAKE AN ORDERED OR UNORDERED LIST HERE LEAVING 5 UNDERSCORES
                    <select name="q04a">
                        <option>--</option>
                        <option>answer option1</option>
                        <option>answer option2 correct</option>
                        <option>answer option3</option>
                    </select> FOLLOWED BY A PARENTHETICAL LIST OF ANSWER OPTIONS HIGHLIGHTING THE CORRECT ANSWER IN BOLD.
                </div>
                <div class="correct response-group-item dropdown_correct answer">answer option2 correct</div>
                <div class="response-group-item"><strong> b) </strong>MAKE AN ORDERED OR UNORDERED LIST HERE LEAVING 5 UNDERSCORES
                    <select name="q04b">
                        <option>--</option>
                        <option>answer option1</option>
                        <option> answer option2</option>
                        <option> answer option3 correct</option>
                    </select> FOLLOWED BY A PARENTHETICAL LIST OF ANSWER OPTIONS HIGHLIGHTING THE CORRECT ANSWER IN BOLD.
                </div>
                <div class="correct response-group-item dropdown_correct answer">answer option3 correct</div>
                <input class="submit-button btn btn-primary" name="submit-button" value="Done" type="button">
            </fieldset>
            </form>
        <div class="answer">
            <p class="explanation">Feedback here.</p>
        </div>
        <div class="message">Please make a selection.</div>
        </div>
    </div>
</div>

Draw Tool Exercise

---

Note: Drawing questions inside tabs or hidden content do not persist drawn data!

<div class="drawing-question panel-body" data-image="SAMPLE_IMAGE_NAME.jpg" data-colors="red, green, black" data-labels="Red, Green, Black">
   <h4>Question</h4>
   <p>INSERT QUESTION TEXT HERE</p>
</div>

Drag and Drop Exercise

---

<div class="panel panel-default interaction-question">
  <div class="panel-body">
    <div class="question-wrap-drag">
    <h4>Exercise</h4>
    <p>QUESTION_TEXT</p>
    <div class="drag-container" title="media/graphics/SAMPLE_IMAGE.jpg">
      <div class="image_holder"></div>
      <p class="drag_directions"></p>
       <div class="drag_controls_holder">
         <div class="drag_controls">
           <div class="draggable ui-widget-content ui-draggable drag_item ui-draggable-handle"> <span class="glyphicon glyphicon-th"></span>DRAGGABLE_1</div>
           <div class="draggable ui-widget-content ui-draggable drag_item ui-draggable-handle"> <span class="glyphicon glyphicon-th"></span>DRAGGABLE_2</div>
           <div class="draggable ui-widget-content ui-draggable drag_item ui-draggable-handle"> <span class="glyphicon glyphicon-th"></span>DRAGGABLE_3</div>
           <div class="draggable ui-widget-content ui-draggable drag_item ui-draggable-handle"> <span class="glyphicon glyphicon-th"></span>DRAGGABLE_4</div>
         </div>
           <input class="done_drag btn btn-primary" value="Done" type="button">
           <input class="reset_drag btn btn-default" value="Reset" type="button">
         </div>
       </div>
      <div class="answer">
          <p>FEEDBACK_TEXT</p>
      </div>
    </div>
  </div>
</div>

Reordering List Exercise

---

<div class="panel panel-default interaction-question">
    <div class="panel-body">
        <div class="question-wrap reordering">
            <h4>Question</h4>
            <p>INSERT QUESTION TEXT HERE</p>
                <form action="#">
                    <fieldset>
                        <div class="response-group-item">
                            <ol class="sortable sortIt ui-sortable" start="1">
                                <li class="ui-state-default ui-sortable-handle"><span class="glyphicon glyphicon-th"></span> INSERT ORDERED LIST ITEMS HERE FOR REORDERING.<span class="glyphicon glyphicon-sort"></span></li>
                                <li class="ui-state-default ui-sortable-handle"><span class="glyphicon glyphicon-th"></span> INSERT ORDERED LIST ITEMS HERE FOR REORDERING.<span class="glyphicon glyphicon-sort"></span></li>
                                <li class="ui-state-default ui-sortable-handle"><span class="glyphicon glyphicon-th"></span> INSERT ORDERED LIST ITEMS HERE FOR REORDERING.<span class="glyphicon glyphicon-sort"></span></li>
                            </ol>
                        </div>
                        <input class="submit-button btn btn-primary" name="submit-button" value="Done" type="button">
                    </fieldset>
                </form>
            <div class="answer response-group-item correct">
                <p class="explanation">INSER YOUR FEEDBACK HERE.</p>
            </div>
            <div class="message">Please make a selection.</div>
        </div>
    </div>
</div>