Moron Test Final / Version 6 Beta

(Assignment here)

Moron Test Version 6 Beta

Blog Questions

  • The scenes that I worked on were based on scene 9, scene 18, and scene 23.
  • The first addition I made in my V6 Beta was to add a fail function.
function fail() {     
clearIcons()     
clearInstr()     
instrSpace.innerHTML = ` <h2 class="fail" >You failed! Click the face to restart.</h2>`     
iconSpace.innerHTML = ` <i class="fas fa-tired" style="     
color: #911c17;     
left: 50%;     
top: 50%;"></i> `     
icons = document.querySelectorAll("i")     Array.prototype.forEach.call(icons,         
function (icon, i) {             
icon.addEventListener("click", function () {                 
level = 0                 
start()             
})         
}) 
}

This function clears the icons and instructions, displays a failure message, along with a sad face that allows the user to restart the game when clicked.

  • The next addition I made was to add a win function.
function win() {     
clearIcons()     
clearInstr()     
instrSpace.innerHTML = <h2 class="win" style="     
top: 60%;     
font-size: 20 rem;">Congratulations</h2>     
<h2 class="notamoron">You're not a moron!</h2>     iconSpace.innerHTML = <i class="text-icon" style="     
color: #911c17;     
left: 50%;     
top: 50%;     
font-size: 10rem;     
">Restart</i>     
icons = document.querySelectorAll("i")     Array.prototype.forEach.call(icons,         
function (icon, i) {             
icon.addEventListener("click", function () {                 
level = 0                 
start()             
})         
}) 
}

This function clears the icons and instructions as well, but displays a success message, along with the word “Restart” that allows the user to restart the game when clicked.

  • The final addition I made was to change the start function to make the win function appear when the user had completed all of the available levels.
function start() {     
if (level < scene.length) {         
clickCount = 0         
clearIcons()         
mapIcons(level)         
iconListener()         
clearInstr()         
mapInstr(level)     
} else {         
win()     
} 
} 

Moron Test Version 5

(Assignment here)

Moron Test Version 5

Blog Questions

  • The values of icon and i are created in the outer iconListener function. The icon value is accessed to add the “click” event listener, and then these values are passed into the inner runScene function.  The i value is accessed in the runScene function to compare the index value of the icon clicked to the index value of the answer, and then these values are passed from the outer runScene function, into the inner scene[level].main function.

Moron Test Version 4

(Assignment here)

Moron Test Version 4

Blog Questions

  • The first test is to make sure clickCount is less than the clicksNeeded. If this is true, the next test is to see if the correct icon was clicked for that specific clickCount. If this is true, one is added to the clickCount, and if not, the fail function runs. If the correct icon was clicked and one is added to the clickCount, the next test is to see if the clickCount is equal to the clicksNeeded. If it is, one is added to the level, and the start function runs again.

Moron Test Version 3

(Assignment here)

Moron Test Version 3

Blog Questions

  • iconListener needs to be called after we have cleared the iconSpace and mapped out new icon elements in order to add the event listener to the new icons that are going to be on the page. If iconListener was called before the iconSpace was cleared and the new icons were mapped, these new icons would not have the event listeners.

Moron Test Version 2

(Assignment here)

Moron Test Version 2

Blog Questions

  • The iconBuilder function uses document.createElement(“i”) to first create the element, then adds the necessary styles and content of that element in order to get the completed icon. The mapIcons function then adds that element into the iconSpace.
  • The clearIcons function clears any child elements from the iconSpace by first checking to see if there is a child, and then removing it.

DOM Manipulation

(Assignments here & here)

Tutorials 

Problem Set

Blog Questions

  • querySelector( ) allows the selection of an element by any CSS selector, while querySelectorAll( ) allows the selection of a set of elements by any CSS selector.
  • Four examples to select this element are:
<p id="one" class=".main">This awesome paragraph!</p>

var select1 = document.querySelector("#one")
var select2 = document.querySelector(".main")
var select3 = document.querySelector("p")
var select4 = document.querySelectorAll("p")[0]

Javascript Objects

(Assignments here & here)

Tutorials 

Problem Set

Blog Questions

  • Reddit uses an array of objects.
var redditPosts = [
    {
        post_type: "Info Thread",
        post_title: "Questions & Suggestions Thread",
        post_link: "https://www.reddit.com/r/nbastreams/comments/beh7dn/questions_suggestions_thread/",
        post_points: 139,
        post_subreddit: "r/nbastreams",
        post_author: "u/invmini",
        time_posted: value, //value based on created time function
        post_comments: [] //array of comments with this post
    }
]

Javascript Arrays

(Assignments here & here)

Tutorials 

Problem Set

Blog Questions

  • Array method pop( ) removes the last value in the array and returns the value that was removed. Array method push( ) inserts a value into the last spot in the array and returns the total number of values in the array. Array method shift( ) removes the first value in the array and returns the value that was removed. Array method unshift( ) inserts a value into the first spot in the array and returns the total number of values in the array.
var array = [ "a", "b" , "c"]
undefined
array.push("d")
4
array.pop()
"d"
array.shift()
"a"
array.unshift("a")
3
array
(3) ["a", "b", "c"]
  • I believe BleacherReport uses an array of data to store the different articles that are presented on the page.