画像の問題タイプにドラッグアンドドロップします



この問題タイプでは、学生はリストから単語、画像、またはその両方をドラッグして、それらを基本画像の定義済みのギャップにドロップできます。

問題を作成する方法

問題バンクで見つけやすいように、問題にわかりやすい名前を付けてください。 (学生には名前が表示されません)

必要なフォーマットを使用して、問題をテキストエディタに追加します。

プレビューセクションで、背景画像ボタンをクリックして画像をアップロードします。大きい画像は最大600 x 400で表示されます。その後、ファイルアップロードボックスの下に画像が表示されます。

[ドラッグ可能なアイテム]セクションでは、種類を[ドラッグ可能な画像]のままにしている場合は画像をアップロードできます。種類を[ドラッグ可能なテキスト]に変更した場合は単語を入力できます。画像とテキストが混在している可能性があります。

ドロップゾーンセクションでは、どのアイテムをどのゾーンに入れるかを選択します。 [プレビューの更新]ボタンをクリックしてください。

あなたはそれから背景画像の上にアイテムを置くことができます、そしてこれはそれらの座標を加えるでしょう。

注意:(1)ドラッグ可能な画像は、150 x 100ピクセルを超えることはできません。大きい場合は、インポート時に拡大縮小されます。短いテキスト記述子も追加することを忘れないでください。あなたがイメージについてのあなたの考えを変えたら、それを取り替えるために単に異なったものをアップロードしなさい。

注(2)ドラッグ可能なテキストは、<sub>、<sup>、<b>、<i>、<em>、<strong>、<br/>を使用してフォーマットできます。

注(3)同じグループ内の選択肢は色分けされており、対応する色のドロップゾーンにのみドロップできます。 「無制限」とマークされている選択肢は、複数の場所で使用できます。

例1

Moodleドキュメンテーション教育に基づいて、参加者はMoodleを教師として使用する段階を指示することによって「Moodleラダーを登る」必要があります。

プレビュー」セクションに、ステップの基本イメージがアップロードされています

「ドラッグ可能な項目」セクションで、「タイプ」が「ドラッグ可能なテキスト」として選択され、各ステージのテキストが追加されます。 (この例では、グループと無制限の設定は使用されていません)

imagedragdropdraggabletextu.png

[ ドロップゾーン]セクションで、以前に追加したオプションの項目をドロップダウンから選択します。

choosedropzonetext.png

これらのテキストは背景画像の下に表示されます。

imagedragdroptextpreview.png

テキストボックスは画像上の正しい位置にドラッグされます(階段の上のステップ)これは自動的に座標をドロップゾーンセクションに追加します:

imagedragdropdropzonescoords.png

他の設定が完了し(下記参照)、問題が保存されます。

参加者はMoodleステージを正しいステップにドラッグする必要があります。

climbthemoodleladder.png

例2

参加者は、正しい国旗と首都をヨーロッパの地図に追加する必要があります。

この問題にはテキストだけでなく画像もあり、グループ機能を利用します。

プレビューセクションに、ヨーロッパの基本地図がアップロードされます。

「ドラッグ可能アイテム」セクションで、首都が「ドラッグ可能テキスト」タイプとして追加され、フラグが「ドラッグ可能イメージ」タイプとして追加されます。


dragtextimageflagsu.png

すべてのドラッグ可能な画像(旗)はグループ1にあり、すべてのドラッグ可能なテキスト項目(首都)はグループ2にあります。

[ ドロップゾーン]セクションで、以前に追加したオプションの項目をドロップダウンから選択します。グループ1のボックスは、グループ2のボックスとは異なる色で表示されます。

ボックスを背景画像上の適切な場所にドラッグすると、[ドロップゾーン]セクションの座標が自動的に更新されます。

他の設定が完了し(下記参照)、問題が保存されます。


dragddropimageflagcity.png

得点とフィードバック

すべてのギャップは同じように重み付けされています。正しく塗りつぶされたドロップゾーンだけがマークを得ます。誤って塗りつぶされたドロップゾーンのネガティブマーキングはありません。

学生に複合フィードバックを表示するかどうかは、小テスト設定フォームの[特定のフィードバック]設定によって決まります。


不正確な受験ごとのペナルティ :2回目以降の受験に対するペナルティによって、使用可能なマークが減ります。上記の例では、2回目の受験で正解が得点の0.6666667を得、3回目の受験で正解が得点の0.3333334を得点します。

問題が「複数回受験との対話」動作で使用されている場合、マーキングは次のように変更されます。

  1. 受験ごとにペナルティファクタによってマークが減ります。
  2. その後の受験で正しい選択が選択されたままであるという条件で、最初に正しい選択が選択された場合には、許容量があります。

ヒント :あなたは望むだけこれらのボックスを完成させることができます。あなたが学生に問題で3回試みることを望むならば、あなたは2つのヒントを提供する必要があるでしょう。実行時にヒントが尽きると問題は終了し、学生は一般的なフィードバックを受け、問題の得点が計算されます。

誤った解答を消去する :[再受験]をクリックすると、誤った選択肢が消去されます。

正しい解答の数を示す :正しい選択肢の数についての意見をフィードバックに含める。

アクセシビリティ

ドラッグアンドドロップの問題はキーボードでアクセスできます。ドロップゾーン間で移動するには<tab>キーを、ドロップゾーン間で可能な選択肢を切り替えるには<space>キーを使用します。

画像の大きさを変える

プラグインの作成者によると、この問題タイプの画像の最大寸法は、サーバー内のコードでこれらおよびこれらの定数を変更することで簡単に変更できます。

 define( 'QTYPE_DDIMAGEORTEXT_BGIMAGE_MAXWIDTH'、600);
define( 'QTYPE_DDIMAGEORTEXT_BGIMAGE_MAXHEIGHT'、400);
define( 'QTYPE_DDIMAGEORTEXT_DRAGIMAGE_MAXWIDTH'、150);
define( 'QTYPE_DDIMAGEORTEXT_DRAGIMAGE_MAXHEIGHT'、100);
 define( 'QTYPE_DDMARKER_BGIMAGE_MAXWIDTH'、600);
define( 'QTYPE_DDMARKER_BGIMAGE_MAXHEIGHT'、400);


例(解剖学の筋肉)

DDinto画像解剖学的筋肉example1.png

DDinto画像解剖学的筋肉example2.png

    • 追加のCSSコードを使用する新しい問題(3と4)は、見栄えがよく、完璧に機能します。

DDinto画像アナトミー筋肉example3.png

DDinto画像解剖学的筋肉example4.png

    • テキストマーカーを科学的ダイアグラムの従来の凡例にさらに似たものにするために、私(JosephRézeau)は私のローカルサイトのAdministration / Appearance / Additional HTML /いくつかのCSSルールにCSSの規則を追加しました。
 <style type = "text / css" >
.que .ddimageortext .dropzone {
    国境  なし 
    背景色  透明 
}
.que .ddimageortext .drag フォーム.mform fieldset #id_previewareaheader .drag {
    国境  なし 
    背景色  透明 
}
.que .ddimageortext div .dragitems div.draghome 
.que .ddimageortext div .dragitems div.drag 
form .mform fieldset #id_previewareaheader div.draghome 
form .mform fieldset #id_previewareaheader div .drag {
    フォント  10px / 1.231 arial  helvetica  clean  sans-serif 
}
</ style > 
    • 正しい解答をそのままにするには、次の手順を実行する必要があります。ドラッグアンドドロップの問題を編集するときは、[複数受験]セクションの[ヒント1]オプションの下の[オプション]をクリックします。

関連情報

この問題タイプはもともとUK Open Universityによって開発され、標準のMoodleの一部になる前に数年間貢献されたプラグインでした。 Open Universityプラグインをここで見つけてください