IFSC 3300 HW 12 Due W Nov. 16, 2022

Directions: Email your HW to IFSC3300HW@gmail.com.

1. Consider this code, based on the first "Try It Yourself" exercise in the DOM Nodes lesson on w3schools.com:

<!DOCTYPE html>

<html>

<body>

<p id="p1">This is a paragraph.</p>

<p id="p2">This is another paragraph.</p>

</div>

var paragraphNode = document.createElement("b");

var textNode = document.createTextNode(paragraphNode.nodeType);

textNode = document.createTextNode(textNode.nodeName);

paragraphNode.appendChild(textNode);

var divisionNode = document.getElementById("div1");

var someChild = divisionNode.childNodes[3];

divisionNode.insertBefore(paragraphNode,someChild);

</script>

</body>

</html>

1a. Find the number 3 in the code. Try replacing it with the following numbers: 0, 1, 2, 3, 4, 100. What does each number do? Why?

1b. For the value 3, compare having the two paragraphs on separate lines (as they are above) to having them on the same line with no spaces between them, like this:

<p id="p1">This is a paragraph.</p><p id="p2">This is another paragraph.</p>

Explain.

2. Consider nodes' parentNode, childNodes, firstChild, lastChild, nextSibling, and previousSibling properties (properties, or attributes, or members, are local variables in an object, such as a DOM node object).These are described in https://www.w3schools.com/js/js_htmldom_navigation.asp. Make buttons demonstrating any two of them by modifying the code of question 1 above. Add these buttons to the button based JavaScript demo you made for a previous HW or HWs. Explain what happened in each of the two cases.

3. Do exercises 6, 7, & 8 which are at the bottom of the “DOM CSS” lesson page (https://www.w3schools.com/js/js_htmldom_css.asp). Explain what does it mean to set the CSS style.display value to “block”.

4. Consider the animated progress bar “Try it Yourself” example at http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_setinterval_progressbar. Make some fun or interesting changes to the animation. State what they are in the program. Change the program further so that it prints out the value of the setInterval() call.

~~6. Do option (a) or option (b).~~

(a) You can add to a game you did earlier in the course, or do a new game. Add some use of the getElementsByTagName() method to your game. Add a use of the variable document.title to your game. That variable is automatically defined by the browser given a web page.

~~(b) Add another button demonstrating use of the getElementsByTagName() method. Use the variable document.title in your page, and have a button that changes its value.~~

3. Build a web page that contains a multiple choice question. When the user selects a wrong answer, the page provides an explanation of why it was wrong. When the user selects a right answer, the page congratulates them on getting it right. It should work when pasted into a W3schools.com sandbox. Provide the code.

(Similar Q in previous HW) 4. Make a small game using calls to setTimeout (), clearTimeout(), setInterval(), and/or clearInterval(). It should work when pasted into a W3schools.com sandbox. Provide the code.