Question Type: Type to label parts of an image

Question Type: Type to label parts of an image

- Mão Doãn の投稿
返信数: 11

Hi everyone,

There are lots of tasks where students are required to label parts of a diagram with short answers. Currently, there's the question type of Drag and Drop onto images, but in many cases, we'd want to encourage students to actively think and recall the knowledge rather than to passively choose from a list. 

I think it'd be great if there's a question type that requires students to type to label parts of an image. 

My current workaround is to label the parts in the image with questions, which they can't type directly in, and use SHORT ANSWER below the image. It works, but doesn't look good, and can be confusing for primary school pupils.

Thank you for reading.

Doan

Mão Doãn への返信

Re: Question Type: Type to label parts of an image

- Dominique Bauer の投稿
画像 Documentation writers 画像 Particularly helpful Moodlers 画像 Plugin developers
Dominique Bauer への返信

Re: Question Type: Type to label parts of an image

- Jon Witts の投稿
画像 Plugin developers 画像 Testers
That is a really nice use of Cloze!
Dominique Bauer への返信

Re: Question Type: Type to label parts of an image

- Mão Doãn の投稿
Hi Dominique Bauer,

Thank you very much. I'm sorry for my late reply. I'm learning to apply your solution to MR, MCV, MC, which makes embedded answer cloze so much more powerful. It is a bit more challenging for our teachers, but I hope they'll soon get used to it.

Thank you again.

Mao
Mão Doãn への返信

Re: Question Type: Type to label parts of an image

- Dominique Bauer の投稿
画像 Documentation writers 画像 Particularly helpful Moodlers 画像 Plugin developers

Helo Mao,

Thank you for your feedback.

To facilitate the positioning of input boxes on the background image, you can use browser extensions as shown in the following video:

Video  Positioning an element onto an image
CC BY-SA 3.0 https://nl.wikipedia.org/wiki/Tingatinga#/media/Bestand:Ally-TT4787.jpg ↗

https://moodleformulas.org/course/view.php?id=77&section=73 ↗

Dominique Bauer への返信

Re: Question Type: Type to label parts of an image

- Jeff Jones の投稿

Can you describe or link a description on how to get the answer labels in the right place?  The video won't load for some reason.

Jeff Jones への返信

Re: Question Type: Type to label parts of an image

- Dominique Bauer の投稿
画像 Documentation writers 画像 Particularly helpful Moodlers 画像 Plugin developers

Hello Jeff,

What video are you referring to?

I added some explanations on https://moodleformulas.org/course/view.php?id=77&section=73 ↗. It's not complete but it can help you get started.

Dominique Bauer への返信

Re: Question Type: Type to label parts of an image

- Jeff Jones の投稿
None of them would play embedded on this page for me, but I found them on YouTube, but had trouble following them (are they meant to have sound?)

The explanation you posted was very helpful. Thank you!

I don't have time to try it with this new info just yet, so maybe it will become apparent, but in my attempts, I could position the SA boxes, but it didn't generate an answer box in the preview. Should it just do that automatically, or is there an extra step for that?

Thanks again!
Jeff Jones への返信

Re: Question Type: Type to label parts of an image

- Jeff Jones の投稿
Got a chance to do it and it worked great! Boxes appeared and everything.

Out of curiosity, how did you get the faded, rounded, red-lined fill boxes in the animal image above? That's a nice effect.
Jeff Jones への返信

Re: Question Type: Type to label parts of an image

- Dominique Bauer の投稿
画像 Documentation writers 画像 Particularly helpful Moodlers 画像 Plugin developers
@Jeff,

If the videos play on Youtube, they should also play on moodleformulas. I mean they are nothing special. Have you tried Mozilla Firefox or Google Chrome browsers? No, unfortunately they don't have sound yet.

If you check this example ↗, you will see that positioning the answer boxes onto the background image is indeed quite simple to obtain. In the example with the animals, I added formatting for the faded, rounded, red-bordered answer boxes. Again, this is not very difficult to do. It would normally be done with three lines of CSS, but since the Atto editor removes the style tag, I prefer to do it with Javascript, which can make formatting look a bit complicated, but in reality it isn't. In the HTML code of the question, for example 'opacity:0.7' means somewhat faded (on a scale of 0 to 1), 'border-radius:20px' means rounded corners, 'border:2px solid #f00' means 2 pixel thick, solid (not dotted), red border where #f00 is the red color in hexadecimal.

I've also included a small script to make the answer box expand as you type long answers. This bit is more complex, again not really, but anyway you can just use it without having to know the details of how it works.