We were at work, and didn't have much time, and I'm not very patient (I've mentioned before I'm not a teacher), so I told him I'd give him a practical example.
-OR-
Try It
And here it is.
It's really rather silly, but i think it explains alright. The code is heavily commented, to make it more readable.
Question One (lotta comments)
<html>
<!this is a comment - notice exclamation mark after "<">
<!comments will be ignored by the browser>
<!the purpose of comments is to serve as guidelines to make code more readable>
<meta name = "viewport" content = "width = device-width">
<!the code above adjusts page width to device width - useful for porting page to mobile devices>
<title>World's Most Difficult Question Ever</title>
<!the title tag tells the browser what to display on the title bar & tab bar>
<head>
<!technical stuff is usually contained in the head section>
<!this is not mandatory - scripts can be included anywhere>
<script>
// this is a javascript comment - notice how we use // instead of <!>
// the <script> tag tells the browser to interpret the following lines
// as javascript instead of as html.
// a function is a way to easily summon a chain of commands or events
// multiple commands can be stored in a function
// which can then be called by, for example, clicking a button
function answer(answer) // this function is called answer
// the reason answer is followed by (answer) is because the code to
// be executed depends on user input
// (answer) can be (a),(b),(c), or (d)
{
if(answer=="b") // here, javascript will evaluate the answer, and
{ // will determine whether it is equal to "b"
// if true, the following code will be executed.
document.getElementById("result").innerHTML = "<h1>Hell yeah!</h1>";
// this code will read the document, and it will find the element
// with id label "result". It will then write <h1>Hell yeah!</h1>
// into that element.
document.getElementById("result").style.backgroundColor = "#00CC00";
// this code will read the document, find the element with id
// label "result", and change the background color to green
document.getElementById("result").style.color = "#FFFFFF";
// this code takes the element with id "result" and changes
// font color to white.
document.getElementById("continue").innerHTML = "<a href='https://dl.dropboxusercontent.com/u/4647913/samples/question2.html'>Next Question</a>";
// this code takes element with id "continue" and puts a link
// to the next question in it. -- href='next.html' can be
// changed to point to another html document containing the
// next question.
}
else if (answer =="d")
// if the above (=="b") is false, it will take (answer) and compare
// it to "d". If it is equal to "d", it will execute the code
{
document.getElementById("result").innerHTML = "<h1>Are you serious?</h1>";
// takes element with id "result" and writes <h1>Are you serious?</h1>
// inside that element
document.getElementById("result").style.backgroundColor = "#CC0000";
// takes element with id "result" and changes background color
// to red
document.getElementById("result").style.color = "#FFFFFF";
// takes element with id "result" and changes font color to white
}
else if (answer =="a") // if answer is neither "b" nor "d"
// this code will evaluate (answer) and compare it to "a".
// if it is equal to "a", it will execute this code.
{
document.getElementById("result").innerHTML = "<h1>You wish...</h1>";
// takes element with id "result" and puts "<h1>You wish...</h1>"
// inside it.
document.getElementById("result").style.backgroundColor = "#CC0000";
// takes element with id "result" and changes background color
// to red
document.getElementById("result").style.color = "#FFFFFF";
// takes element with id "result" and changes font color to white
}
else
// if none of the above comparisons are true
// it will execute the following code.
// this time we don't need else if because we only had 4 options
// this is the 4th and last, so there's no more ifs
// if there were more options, and we wanted different
// answers for each one, it would be safer to use else if instead
{
document.getElementById("result").innerHTML = "<h1>Ok, maybe... but still wrong...</h1>";
// takes element with id "result" and puts <h1>Ok, maybe...
// but still wrong...</h1>" inside it
document.getElementById("result").style.backgroundColor = "#000000";
// takes element with id "result" and changes background color to black
document.getElementById("result").style.color = "#FFFFFF";
// takes element with id "result" and changes font to white
}
}
document.write("<h3>Please click the correct answer.</h3>");
// this code writes to the document. whatever is inside ("") will
// be added to the html section of the page (the document)
// <h> tags mean "headline"
// <h1> is the biggest, and <h6> is the smallest
// so we take a medium size headline (<h3>)
// with a message to click correct answer
document.write("<strong>Who would win a battle between:</strong>");
// this also writes to the html part of the page.
// the <strong> tag refers to the font, or type of text
// It is equally effective to use the <b> tag (bold)
document.write("<br/><span id='answerA' onclick=answer('a')>Superman</span>");
// This will write "superman" on the page
// the <br /> tag is a "return" or a vertical space, or new line
// we use a <span> tag because we want javascript
// to identify it as a whole
// this way, when we click on it, it will identify
// we are clicking on a <span>
// in order to refer to it, we must assign an id to it
// in this case, the id is "answerA"
// the "onclick" function tells javascript to do something
// when we click on this element
// in this case, when you click on it (onclick) it will declare
// variable "answer" and set it equal to "a"
document.write("<br/><span id='answerB' onclick=answer('b')>Batman</span>");
// This will write "Batman" on a new line (<br />),
// right below "Superman"
// If selected, variable "answer" is set to "b"
document.write("<br/><span id='answerC' onclick=answer('c')>Goku</span>");
// Third line to be written is "Goku", right below "Batman"
// If clicked, variable "answer" is set to "c"
document.write("<br/><span id='answerD' onclick=answer('d')>Pikachu</span>");
// Last entry to be written by javascript
// this will pring "Pikachu" (pikaaaaaaa) right below "Goku"
// If selected, variable "answer" is set to "d"
</script>
<!this is how the script tag is closed>
<!every < must be closed by </>
</head>
<!here, we close the head tag and open the body tag>
<!body usually contains the actual content of the page>
<body>
<div id="result"></div>
<!div is used to define a division of elements>
<!the div above is labeled with id "result">
<!function answer() will write directly to this div>
<!(document.getElementById("result").innerHTML...)>
<div id="continue"></div>
<!this div, with id continue is where the link to the>
<!next question is displayed>
</body>
</html>
The second example uses buttons instead of plain text. It accomplishes its purpose just the same, either way, it's just a different way to do it. Question 2 also includes an example of the alert function.
Question 2 (only necessary comments)
<html>
<meta name = "viewport" content = "width = device-width">
<title>World's Most Difficult Question Part 2</title>
<head>
<script>
// the same can be achieved with buttons
// this time, we're doing food, instead of superheroes
// results may be a little biased
// or not
function answer(answer)
{
if(answer=="b")
{
document.getElementById("result").innerHTML = "<h1>Sure is!</h1>";
document.getElementById("result").style.backgroundColor = "#00CC00";
document.getElementById("result").style.color = "#FFFFFF";
document.getElementById("continue").innerHTML = "<a href='https://dl.dropboxusercontent.com/u/4647913/samples/question.html'>Next Question</a>";
}
else if (answer =="d")
{
document.getElementById("result").innerHTML = "<h1>No, not really...</h1>";
document.getElementById("result").style.backgroundColor = "#CC0000";
document.getElementById("result").style.color = "#FFFFFF";
}
else if (answer =="a")
{
document.getElementById("result").innerHTML = "<h1>Nope, it ain't</h1>";
document.getElementById("result").style.backgroundColor = "#CC0000";
document.getElementById("result").style.color = "#FFFFFF";
}
else
{
document.getElementById("result").innerHTML = "<h1>Only during baseball games...</h1>";
document.getElementById("result").style.backgroundColor = "#CC0000";
document.getElementById("result").style.color = "#FFFFFF";
}
}
function popup()
{
alert("Click on somethin' ya dummy!");
}
// this "popup" funcion will summon an alert
// an alert is a little popup window that can display some stuff
// in this case, it only shows a silly message
// not really useful, just proof of concept.
document.write("<h3>Please click the correct answer.</h3>");
document.write("<strong>What's the best food in the world?:</strong>");
document.write("<br/><button type=button id='answerA' onclick=answer('a')>Burgers</button>");
document.write("<br/><button type=button id='answerB' onclick=answer('b')>Pizza</button>");
document.write("<br/><button type=button id='answerC' onclick=answer('c')>Hotdogs</button>");
document.write("<br/><button type=button id='answerD' onclick=answer('d')>Tacos</button>");
// in order to get a button on the screen, we're telling
// javascript to create an element with id's "answerA/B/C/D"
// it's simple, really. it will always be like this:
// <button type=button id="something" onclick=function()>text</button>
// the >text< part can be replaced with >whatever<
// this is the text that actually displayed ON the button
</script>
</head>
<body>
<div id="result"></div>
<div id="continue"></div>
<br />
<br />
<button type=button onclick=popup()>what?</button>
<!this button tag will summon the "popup" funcion when clicked>
</body>
</html>
