jpg" onclick="alert('Android')$code_hint$">
<script src="js/scripts.js$code_hint_1$"></script>
</body>
</html>
]]>
</SourceCode>
<SourceCode code_file="scripts.js">
<![CDATA[
$space$
$code_hint$
]]>
</SourceCode>
<CodeHint />
<ExpectedCode
fail="Add the code !_onclick="showDialog()"_! at the blue arrow.">
<![CDATA[onclick="showDialog()"]]>
</ExpectedCode>
</Exercise>
<Exercise
task="We use a !_script_! tag to include JavaScript code from the !_scripts.js_! file."
level="1" >
<CodeHint_1 />
</Exercise>
<Exercise
task="In the !_scripts.js_! file add the JavaScript fucntion !_showDialog_!."
code_file="scripts.js"
level="4" >
<CodeHint />
<ExpectedCode
fail="Add the code !_function showDialog() {}_! at the blue arrow.">
<![CDATA[function showDialog()]]>
</ExpectedCode>
</Exercise>
<Exercise
task="Add a method call !_alert("Android")_! inside the !_showDialog_! function."
code_file="scripts.js"
level="3" >
<SourceCode code_file="scripts.js">
<![CDATA[
$space$
function showDialog() {
$code_hint$
}
]]>
</SourceCode>
<CodeHint />
<ExpectedCode
fail="Add the code !_alert("Android")_! at the blue arrow.">
<![CDATA[alert(]]>
</ExpectedCode>
<Run success="Great! If you tap on the image now the !_showDialog_! function is called and shows the dialog." />
</Exercise>
<Exercise
task="Congratulations, you've learned to react to events with JavaScript 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>
<Lesson
title="DOM"
example="document.getElementById("id")"
description="In this lesson you'll learn to access HTML elements from JavaScript.">
<Files
template="simple_project"
project_name="My Website">
<CodeFile name="index.html" />
<CodeFile name="scripts.js" />
</Files>
<Exercise
task="Press Run to view the website below."
level="1" >
<SourceCode code_file="index.html">
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<h1>My Website</h1>
<p id="time"$code_hint$>Time</p>
<script src="js/scripts.js$code_hint_1$"></script>
</body>
</html>
]]>
</SourceCode>
<SourceCode code_file="scripts.js">
<![CDATA[
$space$
$code_hint$
]]>
</SourceCode>
<Run success="Let's make the web page show the current time from JavaScript." />
</Exercise>
<Exercise
task="The !_p_! element has an !_id_! attribute !_time_!. The id makes it easy to access and manipulate the element from JavaScript code later."
code_file="index.html"
level="1" >
<CodeHint />
</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="Add the JavaScript code !_var timeElement = document.getElementById("time");_! to access the HTML element in the document object model (DOM)."
code_file="scripts.js"
level="3" >
<CodeHint />
<ExpectedCode
fail="Add the code !_var timeElement = document.getElementById("time");_! at the blue arrow.">
<![CDATA[var timeElement = document.getElementById("time")]]>
</ExpectedCode>
</Exercise>
<Exercise
task="Now use the code !_timeElement.innerHTML = new Date();_! to actually change the HTML element to show the current date and time."
code_file="scripts.js"
level="3" >
<CodeHint />
<ExpectedCode
fail="Add the code !_timeElement.innerHTML = new Date();_! at the blue arrow.">
<![CDATA[timeElement.innerHTML = new Date()]]>
</ExpectedCode>
<Run success="Awesome! The JavaScript code changes the paragraph to show the current date and time now." />
</Exercise>
<Exercise
task="Congratulations, you've learned to access HTML elements from the JavaScript DOM 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>
<Lesson
title="Interaction"
example="onclick="toggleImage()""
description="In this lesson you'll learn to use events and DOM manipulation to react to user interaction.">
<Files
template="simple_project"
template2="simple_project_images"
project_name="My Website">
<CodeFile name="index.html" />
<CodeFile name="scripts.js" />
</Files>
<Exercise
task="Press Run to view the website below."
level="1" >
<SourceCode code_file="index.html">
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<h1>My Website</h1>
<img src="img/android1.png"$code_hint$>
<script src="js/scripts.js$code_hint_1$"></script>
</body>
</html>
]]>
</SourceCode>
<SourceCode code_file="scripts.js">
<![CDATA[
$space$
function toggleImage() {$code_hint$
$code_hint_1$
}
]]>
</SourceCode>
<Run success="Let's change the image when the user clicks on it." />
</Exercise>
<Exercise
task="Set the !_id_! of the !_img_! element to !_myImage_!."
code_file="index.html"
level="4" >
<CodeHint />
<ExpectedCode
fail="Add attribute !_id="myImage"_!