圖片的考題設計
以下介紹兩種與圖型相關的考題設計
- 圖片點擊輸入
- 圖片拖放對應輸入
圖片對應輸入
(image mapped input problem)
考題如果與圖片有關,例如,請學生指出哪裡是南投縣,學生點擊到對的區域就給分。
步驟如下:
- 上傳圖形檔
- 出題
- 標記答案區
詳細說明如下
上傳圖形檔 點擊:內容 >> Files & Upload,上傳你的圖片題目。 注意圖型不宜過大與過小,大約 500 相素
出題 問題 >> 進階 >> 圖片點擊輸入。進入後,把題目改成以下的內容。
<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 為你在第一步驟所上傳的圖片。
- 標記答案區
透過 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]]"
二、圖片拖放對應輸入 (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>
步驟如下:
- 上傳圖形檔
- 內容 >> Files & Upload,上傳你的圖片題目
出題
- 修改 drag_and_drop_input img 為你在第一步驟所上傳的圖片。
- 其中 draggable id 是你要「拖」的項目,是一段文字,寫在 label 上,例如上例的 contex
- 圖片中可被「放」的區域在 target 中,其中 x, y, w, h 分別代表 pixel 的座標與寬高,一樣可以用 imagemap generator 的工具來產生。
標記答案區
- 有固定答案程式語法如下範例:
correct_answer = {'1':'t3','2':'t4', '3':'t1','4':'t2'}
- 無固定答案程式語法如下範例:
'draggables': ['1', '2', '3', '4'], 'targets': ['t3', 't4', 't1','t2' ],
- 有固定答案程式語法如下範例: