IFSC 30003 HW 12 Due W Nov. 19, 2025

Directions: Email your HW to IFSC30003HW@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, and provide a screen shot.

2. Go to the demo at https://dberleant.github.io/IFSC3300/DOMnavigatorV1.html. Notice the button labeled "Show current nodeValue". Using the buttons, navigate to the DOM element for that button, and then to its text label, and then click that button to show its own text label in the output window. It should print out as @Show current nodeValue@. In other words, Where the page starts out saying Output (if any) may be viewed here, between @ and @. when you are done it should say "@Show current nodeValue@". The reason the program starts and ends its outputs with "@" is to make it clearer what is happening when it outputs zero characters, or spaces. Hand in a screen shot showing its output of @Show current nodeValue@.

For more information you can review https://www.w3schools.com/js/js_htmldom_navigation.asp.

Hint: if you find your self ending up in in a "null" node (i.e. the variable here equals null and thus you are actually no longer in any node, and thus are stuck and need to reload the page), you could do the following. Keep track of your sequence of button presses with pencil and paper or in a separate word or notepad window. Then you can redo the sequence after you reload the page, up to some point before you landed in nulllandia, and continue navigating from there (avoiding nulllandia this time!).

3. In the previous HW you improved a program by adding a use of setTimeout(). This time add an animation to it. Explain the experience and, if you used AI, discuss the limitations of AI. After your explanation, also hand in the code.

4. Consider the animated progress bar “Try it Yourself” example at http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_setinterval_progressbar. Without using AI, make (a) fun or interesting change(s) to the animationusing the color #56789a. State what it is. Change the program further so that it prints out the integer value of the setInterval() call.

Hand in a screen shot.

~~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.