at the blue arrow.">
<![CDATA[id="myImage"]]>
</ExpectedCode>
</Exercise>
<Exercise
task="Add an !_onclick_! event handler which calls the function !_toggleImage()_!."
code_file="index.html"
level="4" >
<CodeHint />
<ExpectedCode
fail="Add attribute !_onclick=&quot;toggleImage()&quot;_! at the blue arrow.">
<![CDATA[onclick="toggleImage()"]]>
</ExpectedCode>
</Exercise>
<Exercise
task="The HTML code uses a !_script_! tag to include the JavaScript file !_scripts.js_!."
code_file="index.html"
level="1" >
<CodeHint_1 />
</Exercise>
<Exercise
task="We have already added the event handler function !_toggleImage_!."
code_file="scripts.js"
level="1" >
<CodeHint />
</Exercise>
<Exercise
task="Now add the code !_var image = document.getElementById(&quot;myImage&quot;);_! to access the HTML image element."
code_file="scripts.js"
level="3" >
<CodeHint_1 />
<ExpectedCode
fail="Add the code !_var image = document.getElementById(&quot;myImage&quot;);_! at the blue arrow.">
<![CDATA[var image = document.getElementById("myImage")]]>
</ExpectedCode>
</Exercise>
<Exercise
task="We have added an if statetment which toggles the !_src_! attribute of the HTML image element."
code_file="scripts.js"
level="1" >
<CodeHint />
<SourceCode code_file="scripts.js">
<![CDATA[
$space$
function toggleImage() {
var image = document.getElementById("myImage");

if (image.src.match("android1")) {
image.src$code_hint$ = "img/android2.png";
} else {
image.src = "img/android1.png";
}
}
]]>
</SourceCode>
<Run success="Awesome! Now click on the image and see what happens." />
</Exercise>
<Exercise
task="Congratulations, you've learned to implement user interaction inside the web page in this lesson! Now play with the code a bit on your own. Change the text which is shown and run it as often as you like. Then continue with the next lesson." >
</Exercise>
</Lesson>
</Course>