Putting words inside an image with structure
Great! Another vacation day!
Alice loved the beach. It was her favorite place to have fun, but she was scared of forgetting what she had learned in school after playing so much on the beach. Therefore, she had an idea. She asked her mother to help her write down everything that she found around her.She had so many things to write down, because the beach was full of people: some of them were sunbathing, others swimming in the sea; there were also children building sandcastles and others playing with balls.
Can we help her as well?
Time for action – creating a scene
We are going to create a scene using a background picture and then add other clipart inside it to represent each word.
- Start Inkscape and minimize it. You will use it later.
- Start Word 2007. You will be working in a new blank document.
In this case, we will use Word 2007 to search for clipart. However, you can also create a scene with other clipart libraries. We will also use other applications that provide high-quality clipart in other visually rich exercises.
- A bucket and a shovel
- A beach ball
- A sandcastle
What just happened?
We combined several scalable vector clipart images to create a representation of a scene on the beach. Inkscape allowed us to define a background and add different elements on top of it. Each element represents a different word.
Time for action – adding floating labels to the image
- Click on the Create and edit text objects button (a big A with a cursor on the lefthand side) or press F8. This function allows you to add text with different fonts and colors in Inkscape's drawing area.
- Select the desired font and size using the two combo boxes that appear on the upper left-hand corner of the window, below the main toolbar.
- Repeat the aforementioned steps (1 to 2) to write the following words as labels, with a layout similar to the one shown in the next image:
- Beach ball
- Once you enter each word, you can click on the desired color in the color palette. It is a good idea to use diverse colors to make it clear that they are different words.
- Select File Save| from Inkscape's main menu in order to save the changes made to the original Inkscape SVG file.
- Select File Export Bitmap|. A dialog box showing many export options will appear.Enter 72 on the first dpi (Dots Per Inch) textbox.
- Click on the Drawing button, and then on Export. Inkscape will export the drawing in PNG format. The exported bitmap graphics with the beach scene and the words at the bottom will be saved at C:\Beach\image030201.png.
What just happened?
We created a representation of a scene on the beach using Inkscape and scalable vector clipart. We first added a background picture and then used vector graphics to add different elements related to specific words. We could change their size without losing quality and we could put them on top of the existing background.
We added text labels for each word that represents an element in the scene. Finally, we exported the resulting image to the PNG format.
Time for action – uploading the scene to Moodle
We now have to upload the original SVG file and its bitmap representation, in order to add our exercise to an existing Moodle course.
- Log in to your Moodle server.
- Click on the desired course name (Beach). You can create a new course or use an existing one.
- As previously learned, follow the necessary steps to edit the summary for a desired week. Enter Exercise 2 in the Summary textbox and save the changes.
- Click on the Add an activity combo box for the selected week and select Upload a single file.
- Enter Dragging and dropping words in Assignment name.
- Select Verdana in font and 5 (18) in size—the first two combo boxes below Description. Next, select your desired color for the text.
- Click on the big textbox below Description and enter Putting words inside an image with structure. This is the description of the student's goal for this exercise.
- Press Enter and click on the Insert Image button (a mountain or a tree, according to the Moodle version). A new web page will appear displaying the title Insert image.
- Click on the chapter03 folder link and then click on the Browse button. Browse to the folder that holds the exported drawing and select the file to upload, image030201.png. Then click on Open and on the Upload button. The label File uploaded successfully will appear inside the File browser box.
- Next, click on the recently uploaded file name, image030201.png. The image will appear in the Preview box.
- Enter image in Alternate text and click on OK. The image will appear below the previously entered title. Remember that you can click on the Enlarge editor button to view more information on the screen.
- Press Enter and click on the Ordered list button (a list of 1, 2, and 3).
- Write the detailed steps to complete the exercise.
- Open this picture using Inkscape
- Drag-and-drop each word to match the corresponding element in the picture
- Save and upload the new picture
- Next, select the picture word written in the sentence that describes the first step.
- Click on the Insert Web Link button (a chain). A new web page will appear displaying the title Insert Link.
- Click on the Browse button and then on the chapter03 folder link.
- Click on the new Browse button that appears. Browse to the folder that holds the previously created Inkscape drawing with the scene (C:\Beach) and select the file to upload, image030201.svg. Next, click on Open, on Upload, and on the file name link, as shown in the next screenshot:
- Moodle will display the URL for this Inkscape file in the URL textbox. Enter picture in the title textbox and click on OK. This way, the student is going to be able to download the Inkscape drawing by clicking on the word picture with a hyperlink, as shown in the next screenshot:
- Select 100 in the Grade combo box.
- Select 10MB in Maximum size. This is the maximum size for the file that each student is going to be able to upload as a result for this activity. However, it is very important to check the possibilities offered by your Moodle server with its Moodle administrator.
- Finally, scroll down and select Save and return to course.
What just happened?
We added the putting words inside an image with structure exercise to a Moodle course.The students are now going to be able to follow the instructions explained in the upload a single file assignment and download the Inkscape drawing to drag-and-drop words.
We defined a hyperlink to the Inkscape drawing because the students are going to use it to drag-and-drop each word to the corresponding zone of the scene.
The upload a single file assignment allowed us to describe the necessary steps to complete the activity, and it's also going to enable the students to upload their results as an Inkscape drawing.
In this case, the necessary steps to complete the activity are just a few sentences in order to simplify the example. However, sometimes, it is necessary to write more instructions when you have to work with other applications such as Inkscape.
Time for action – running the exercise using a netbook's touchpad
- Click on the course name (Beach) and switch your role to student.
- Click on the Dragging and dropping words link on the corresponding week. The web browser will show the bitmap image of the scene and the instructions with the hyperlink to the Inkscape drawing. The picture word will appear in blue and underlined, indicating that it is a hyperlink.
- Right-click on the Picture word with the hyperlink and select Save Link As in the context menu that appears. Save the file as mybeach.svg in your documents folder.
- Click on the Start or edit my journal entry button. Moodle will display a big text area with an HTML editor.
- Start Inkscape and open the previously saved file, mybeach.svg.
- Drag each word below the image and drop it over the corresponding zone or element in the scene. You can use your finger to move the mouse pointer over the desired word, then press the left mouse pad button and drag the word with your finger without releasing the button. Once the word is over the desired zone or element in the scene, release the button. This way, you can play with your fingers whilst solving the exercise, as shown in the next image:
- Once you have finished dragging and dropping each word, select File Export Bitmap|. A dialog box showing many export options will appear.
- Click on the Drawing button and then on Export. Inkscape will export the drawing in PNG format. The exported drawing will be mybeach.png in your documents folder.
- Go back to your web browser and click on Browse. Browse to the folder that holds the exported drawing and select the file to upload, mybeach.png. Then, click on Open.
- The previously exported drawing in PNG format will now appear below the instructions with the name mybeach.png. You can click on the link and download this image with the words dropped over the corresponding elements in the scene. The next image shows an example of the solved exercise.
- Don't forget to check the results for this exercise as previously learned.
What just happened?
In this activity, we created a drawing representing a scene on the beach. We asked the child to drag-and-drop each word below the scene to match the corresponding element or zone using a netbook and its touchpad.
The activity consists of watching the scene, reading the words, and understanding them and their relationship with elements in the scene. The child can then begin to drag-and-drop each word using any pointing device capable of dragging and dropping elements. We applied the following concepts and resources:
- Associating images with words and reversibility. The child has to associate an image with a word. This way, the exercise improves training in reverse thinking.
- Reading comprehension. The child has to read and understand simple words related to an existing scene.
- Images composed of multiple layers. There is a background scene, elements, and words that compose multiple layers for the complex scene. The child can identify himself/herself with the situation and develop his/her imagination while solving the exercise.
We can increase the complexity of this exercise by adding more words and elements. This kind of visually rich activity is very useful to improve the child's vocabulary.
It is also possible to run this activity using a classic mouse, a gamepad's stick or a joystick. Working with different hardware devices can increase or reduce the complexity and help to work with diverse kinds of problems. The most appropriate hardware will depend on the child's disabilities.
New hardware such as a netbook and its touchpad usually offers additional motivation to the child.
Have a go hero – dragging and dropping pictures into the scene
You can increase the complexity of the previous activity in order to allow children to exercise pattern recognition and matching. Instead of working with words, add pictures similar to the elements found in the scene. However, the new pictures should be slightly different. For example, you can add an umbrella with different colors.
Add the new pictures organized at the bottom of the scene with the same layout previously explained for the words, in rows and columns.
The child can now recognize patterns, drag-and-drop each element over its similar element on the scene, and complete the new exercise.
You can create different scenes with diverse skill levels and combine many activities using the tools that we have learned about so far.
Pop quiz – discovering new tools and activities
- You can embed an MP3 sound file in Moodle by:
- Uploading it and inserting a web link to it
- Copying it to the sounds shared folder in the Moodle server
- Uploading it and clicking on the Embed sound button
- In order to be able to reproduce an embedded MP3 file in Moodle:
- You have to install a multimedia plugin in the exercise
- You have to make sure that its multimedia plugins are enabled
- You have to make sure that the MP3 codec checkbox is activated in Moodle's multimedia control panel
- An upload a single file assignment:
- Doesn't allow the student to upload files
- Allows the student to neither upload files nor write text
- Allows the student to upload files
- A netbook's touchpad offers functions similar to:
- A keyboard
- A webcam
- A mouse
- You can upload and add links to files in Moodle by:
- Selecting the text to hold the hyperlink and clicking on the Insert Web Link nbutton (a chain)
- Clicking on the Insert Web Link button (a chain) without any selected text
- Clicking on the hyperlink manager in Moodle's Control Panel
In this article, we have learned how to:
- Use hyperlinks generated by Moodle in order to add sound and links to files that the student can download in order to solve the exercises
- Work with Inkscape and a netbook's touchpad to allow children with special education needs to use their fingers in order to drag-and-drop the words in the scene on a tiny screen
Now that we have learned to work with the association of images and words, we're ready to prepare exercises to develop sorting activities mixing words and pictures, which is the topic of the next article.