圖片的考題設計

以下介紹兩種與圖型相關的考題設計

  1. 圖片點擊輸入
  2. 圖片拖放對應輸入

圖片對應輸入

(image mapped input problem)

考題如果與圖片有關,例如,請學生指出哪裡是南投縣,學生點擊到對的區域就給分。

步驟如下:

  1. 上傳圖形檔
  2. 出題
  3. 標記答案區

詳細說明如下

  1. 上傳圖形檔 點擊:內容 >> Files & Upload,上傳你的圖片題目。 注意圖型不宜過大與過小,大約 500 相素

  2. 出題 問題 >> 進階 >> 圖片點擊輸入。進入後,把題目改成以下的內容。

<problem>
<p> 哪一個物件是屬於 Context? 請點擊該物件
</p>
  <imageresponse>
    <imageinput src="/static/StrategyTest.png"
    width="500" height="275" rectangle="(15,16)-(131,87)" alt="Context"/>
  </imageresponse>
<solution>
  <div class="detailed-solution">
    <p>Explanation</p>
    <p>SortArray 在此將排序的工作委託給 SortStrategy, 因此他是 Strategy 樣式中的 Context 物件 </p>
  </div>
</solution>
</problem>

修改 StrategyTest.png 為你在第一步驟所上傳的圖片。

  1. 標記答案區

透過 imagemap generator 工具,可以設定答案的區域,例如上面的 (15,16)-(131,87) 就是答案區。建議可以使用 http://imagemap-generator.dariodomi.de/ 的線上工具。其中 (15,16)為區域左上角,(131,87) 為區域右下角。

取得後,修改上一步驟的程式碼就完成了。

如何使用 ImageMap generator:

如果你的題目是多個矩形區域與非矩形區域,作法雷同,前者需加上每個矩形範圍,後者除了加上區域範圍之外,要將"rectangle"更為"regions";範圍越精細,當然偵測的越精準唷~ 多個矩形區域程式語法如下範例:

rectangle="(62,94)-(262,137);(306,41)-(389,173);(89,211)-(187,410)"

非矩形區域程式語法如下範例:

regions="[[219,86],[305,192],[305,381],[139,381],[139,192]]"

官方手冊請參考:http://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/image_mapped_input.html


二、圖片拖放對應輸入 (Drag and Drop)

方式和上述題型很像,程式碼改為以下:

<problem>
    <customresponse>
      <h3>Drag and Drop with Outline</h3>
      <p>Label the hydrogen atoms connected with the left carbon atom.</p>
        <drag_and_drop_input img="/static/StrategyTest.png" target_outline="true" one_per_target="true" no_labels="true" label_bg_color="rgb(222, 139, 238)">
              <draggable id="1" label="contex"/>
              <draggable id="2" label="strategy"/>
              <draggable id="3" label="ComcreteStrategy"/>

            <target id="t1" x="16" y="15" w="115" h="72"/>
            <target id="t2" x="215" y="14" w="115" h="72"/>
            <target id="t3" x="89" y="183" w="115" h="72"/>
            <target id="t4" x="229" y="182" w="115" h="72"/>
            <target id="t3" x="364" y="186" w="115" h="72"/>                    
        </drag_and_drop_input>
      <answer type="loncapa/python">
correct_answer = [{
    'draggables': ['1', '2', '3'],
    'targets': ['t1', 't2', 't3' ],
    'rule':'anyof'
}]
if draganddrop.grade(submission[0], correct_answer):
    correct = ['correct']
else:
    correct = ['incorrect']
        </answer>
    </customresponse>
</problem>

步驟如下:

  1. 上傳圖形檔
    • 內容 >> Files & Upload,上傳你的圖片題目
  2. 出題

    • 修改 drag_and_drop_input img 為你在第一步驟所上傳的圖片。
    • 其中 draggable id 是你要「拖」的項目,是一段文字,寫在 label 上,例如上例的 contex
    • 圖片中可被「放」的區域在 target 中,其中 x, y, w, h 分別代表 pixel 的座標與寬高,一樣可以用 imagemap generator 的工具來產生。
  3. 標記答案區

    • 有固定答案程式語法如下範例:
      correct_answer = {'1':'t3','2':'t4', '3':'t1','4':'t2'}
      
    • 無固定答案程式語法如下範例:
      'draggables': ['1', '2', '3', '4'],
      'targets': ['t3', 't4', 't1','t2' ],
      

官方手冊請參考:http://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/drag_and_drop.html

results matching ""

    No results matching ""