Question Type: Type to label parts of an image

Question Type: Type to label parts of an image

由Mão Doãn發表於
Number of replies: 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

評比平均分數： -
In reply to Mão Doãn

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

由Dominique Bauer發表於
Documentation writers的相片 Particularly helpful Moodlers的相片 Plugin developers的相片

Hello Mão,

Video  Embedded Answers (Cloze) - Short answers onto image

https://moodleformulas.org/course/view.php?id=89&section=28 ↗

評比平均分數：Useful (6)
In reply to 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!
評比平均分數： -
In reply to 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
評比平均分數： -
In reply to 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 ↗

評比平均分數：Useful (1)
In reply to 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.

評比平均分數： -
In reply to 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.

評比平均分數： -
In reply to 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!
評比平均分數： -
In reply to 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.
評比平均分數： -
In reply to 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.
評比平均分數：Useful (1)