moodle双窗格测验Dual pane quiz 阅读理解题的布局方法

转载：https://dynamiccourseware.org/course/view.php?id=77&section=15

 2006-12-18, 2017-12-11, 2019-09-01.

• The following examples illustrate dual pane quizzes, that is, with one pane containing a text to be read and the other pane containing related questions. The text pane can include formatted text and images. The question pane can include any type of questions.

• The image below is a hard copy example of what we are trying to reproduce here.

• The first example uses two windows, the second one uses a single window. Using one or the other solution is simply a matter of preference.

• Using two windows

• With this solution, each pane is in fact a window. The text to be read and questions are displayed in separate windows, both of which are independently resizable and scrollable.

  All that is required is a description question containing the text and a small JavaScript to display it in a new window.

• This solution should work on Windows type desk computers. It may not work on tablets and phones.

• Example

• Note that when the "text" and "questions" windows are opened, they can be maximized to the left or to the right side of the screen by using the following keyboard shortcuts:

  • Windows logo key  + Left Arrow
  • Windows logo key  + Right Arrow

• The HTML code of the description question containing the text to be read and the JavaScript to display it in a new window is given below:

• <h3>Instructions</h3>
  
  <p>Follow these steps to display the text to be read:</p>
  
  <ol>
    <li>Move this window to the right by using the following keyboard shortcut:<br>
    Windows logo key ⊞ + Right Arrow</li>
    <li>Click on <button οnclick="w201805211024()">Text to read</button></li>
  </ol>
  
  <script>
    function w201805211024() {
      var x = 0.488*screen.availWidth;
      var y = 0.92*screen.availHeight;
      windo = window.open(" ", "_blank", "scrollbars=yes,resizable=yes,width=" + x + " ,height=" + y + " ");
      windo.document.write('<h3>Place the title here</h3><p>Place the first paragraph of the text to be read here.</p><p>Place the second paragraph of the text to be read here.</p><p>Place an image as follows:</p><p><img src="https://dynamiccourseware.org/pluginfile.php/8205/mod_label/intro/Formulas20180521-0935.jpg" width="250" class="img-responsive"></p>');
    }
  </script>

• Example

• Open quiz in Dual pane

• Using a single window

• With this solution, the standard questions pane is squeezed to the left, and the text to be read is displayed inside a fixed pane on the right. Both the text pane and the questions pane are responsive and scrollable.

  All that is required is a description question containing a small JavaScript to squeeze the questions pane to the left and some HTML formatting to display the text inside a pane on the right.

• Example

• In this example, questions are squeezed on the left, and text and an image are displayed in a pane on the right.

• The HTML code of the description question containing the JavaScript to squeeze the questions to the left and the formatting code to display the text in a pane on the right is given below:

• <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("#region-main-box").css("paddingRight","36%");
    });
  </script>
  
  <h3>Instructions</h3>
  <p>Read the text displayed on the right then answer questions on the left.
  </p>
  
  <div style="position: fixed;
    top:50px;
    width:33%;
    overflow: auto;
    height:80%;
    left:65%;
    background-color:#FFF;
    padding:0 25px 0 25px;
    box-shadow: 0 5px 10px #cbcbcb;
    z-index: 1000;">
    <p>Place the first paragraph of the text to be read here.</p>
    <p>Place the second paragraph of the text to be read here.</p>
    <p>Place an image as follows:</p>
    <p><img src="https://dynamiccourseware.org/pluginfile.php/8217/mod_label/intro/Formulas20180521-0935.jpg" width="250" class="img-responsive"></p>
  </div>