[FINAL] – The Moron Test – Timing Functions and Start / Finish Functions


Hey all. This set of work pretty interesting. I had a difficult time at the start. I decided to copy over the files from the zip files provided. I started to watch the first few parts of the video. There were many errors showing that I could not understand in the console. I wanted to fix these errors before proceeding with the video to make sure I fully understand what is happening. The error that was being shown was this..

Then I decided the to attach the js file with the script tag since it said a4 was not defined. I also removed the a4() function in the scenes.js file. There was a fix but I did not want to alter the scenes.js file. I added the script file at the end thinking it would work (like the picture below).

But that didn’t fix the issue. Then I just said fudge it and continued to watch the video, hoping there was a fix. Turns out the a4.js script tag has to be on top of the scenes.js and moron.js file. I was triggered because I wasted like 20 minutes trying to figure it out. I just wanted my files to work while professor Mike was doing the walk through. I don’t know what the morale of the story is. Don’t jump the gun? 🙂

Video Walkthrough – Videos 16 – 18


Blog Question


Describe how the start and finish functions are called in moron.js. How does the program know if there is a start or finish function to run? Where is each start or finish function placed and why?

So, every scene has a start, main and finish object. The start is used if we need to run a function when a scene starts. The main is used for all the logic functions. The finish is if we need to run a function after someone has completed all the clicks they need to click. The start and finish functions are null, unless there are things that need to be done at the start of the scene or if things are need to be done after the clicks are done.

The start function needs to be placed in the playScene() function. It needs to be placed before the scene, plays and listens for clicks.

function playScene() {
    if (scene[level].start) {
        scene[level].start();
    }

    icons = document.querySelectorAll('i');
    let iconsArr = [...icons];
    iconsArr.forEach(function (icon, indx) {
        icon.addEventListener('click', function () {
            check(icon, indx);
        })
    })
}

So, if the scene based on the level has a start value, then the if() statement is true. If the start value is set to null then the if() statement will resolve as false. If the statement is true, then it will run the start function inside the scene’s level database in scene.js


The finish function on the other hand needs to be added after the clicks are done. Inside the check(icon, indx) function, we need to add the logic for running a finish to the scene.

function check(icon, indx) {
    let answer = scene[level].answer[clickCount];
    let clicksNeeded = scene[level].answer.length;
    if (indx === answer) {
        clickCount++
        scene[level].main(icon, indx);
        if (clickCount === clicksNeeded) {
            if (scene[level].finish) {
                scene[level].finish();
            } else {
                console.log('scene complete');
                level++
                nextScene();
            }

        }
    } else {
        console.log('wrong icon!')
    }
}

Once a scene is complete, the level is increase and the nextScene() function is called. There should be an if() statement before that. When the click count equals the clicksNeeded (meaning the scene is finished), check for a finish function. If there is no finish function increase level and go to the next scene. If there is a finish function, execute it inside the scene’s level database in scene.js ………….


dev1 – timing functions and start / finish functions

We’re coming to the end of the Moron Test, having built the logic and a number of tools to interact with scenes. There are just a few remaining tools needed to create all the various interactions in the game. I’ve created a complete scenes.js file you can use to follow along, not having to write new scenes if you’d like to use it. It also includes another js file a4.js which is called to build a whole bunch of icons as well.

For the new tools, we’ll need to have a timing function and will use the setTimeout(callback, time) function. Also, we need to manage events that happen before a user might start clicking on icons and after a user has clicked on all the correct icons. To do this we will add a start and finish keys to each scene with a default null value. But we will be able to add functions where necessary.

And, finally we’ll create a failScene function for when our user makes a mistake.

Tutorial videos:

Full Moron Test Playlist

For the Blog:

Describe how the start and finish functions are called in moron.js. How does the program know if there is a start or finish function to run? Where is each start or finish function placed and why?

Moron Test – Scene Specific Function and Helper Functions

with in our “check(icon, indx)” function we use – scene[level].main(icon, indx); inorder to acess scence specific insructions. inorder to acess these instructions we need to know three vital pieces of information. the first on which is the level, the icon that was clicked on and the index of said icon which is passed onto main in the second js file in the second js file, scences.js, main takes these values and if there is scence specific instructions they will take place.

[FINAL] – The Moron Test – Scene Specific Function and Helper Functions


Hello. I am enjoying the video tutorials. Everything seems like it is falling into place. I just hope professor Mike goes over how to load the scene on the startup. For example, its annoying typing nextScene() everytime in the console(im pretty sure its a simple task such as calling nextScene() function in the start). I am also looking forward to the fail scene. Overall, everything is going smoooooOOOOoooth.

Video Walkthrough – Videos 14 – 15


Blog Question


Describe how the scene[level].main(icon, indx) function is called within the check(icon, indx) function. How are we tracking the icon and index values? Why do we need to track and pass the icon and index values to the scene’s main function? What does the scene’s main function do with these values?

To have icons hide/instructions appear you need a main function in the scene[level]. This function takes the icon and indx from the game when a icon is clicked. Within the check(icon, indx) function we use the same parameters passed to that function and pass it into scene[level].main(icon, indx). The main function is called whenever there is a click in the game and ONLY if the scene has the correct icon clicked(answer) , because the playScene() function adds an event listener and calls the check(icon, indx) function whenever there is a click. The values of the icons that where clicked are passed into scene[level].main(icon, indx). We need to track and pass the icon and indx values to the scene’s main function because whenever we want to call a function,such as the hide function, we need to use the icon value inside of the scene’s main function. An example of the main function is below.

 main: function (icon, indx) {
      console.log(`you clicked ${icon} ${indx}, the answer is  ${scene[level].answer[clickCount-1]}`);
      hide(icon);
      changeInstructions(this.instructions[clickCount]);
 }

Finally Posting Something :(

For the question I chose, “Which sport is hands free?” I couldn’t think of any type of other questions so I went down the route of sports. With the positioning I wanted the icons to fit on the page nicely. Also putting the soccer ball in the middle makes the question easier but as I go through this process I want the icons to move in different places and ask different questions for the other icons. I didn’t add anything extra to the icons. I only added colors and moved the icons around. http://clomichelle.net/webdev1/moron-test-v1/

Domgame — Moron Test scene-specific function and helper functions

Once again no link in this because all of the versions are in one.

Describe how the scene[level].main(icon, indx) function is called within the check(icon, indx) function. How are we tracking the icon and index values? Why do we need to track and pass the icon and index values to the scene’s main function? What does the scene’s main function do with these values?

The main function is under the scene and this is to take values for the icon and the index from the game when its clicked. Under the function, check(icon, indx) you add scene[level].main(icon, indx) so that the values are passed at the right scene and this is after the (‘click’). If the index equals the answer the count increases and then the main functions run. We take the arguments from the outside and pass them from the inside of the function.

main: function(icon, indx){
            console.log(`you clicked ${icon}, the answer is ${scene[level].answer[clickCount-1]}`)
            hide(icon);
            // (this)  pertains to the specific icon
            changeInstructions(this.instructions[clickCount]);
}

This is to hide icons and you can then add this under the main function.

function hide(el){
    el.classList.add('hidden');
}

dev1 – Moron Test scene specific function and helper functions

This week brings the start of building a number of helper functions used in various scenes to do scene specific actions. In the moron test game, in some scenes when an icon is clicked it is then hidden, in others icons move, and in others instructions change. So we need to build a number of ‘helper’ functions for each of these actions.

We also need to have a way to apply those helpers to each particular scene. To do this to each scene object we will add a new main key that will be a function. This function will then be called every time an icon is clicked. And inside this scene[level].main function we can pass the various required helper functions for a particular scene.

We’ll cover this in two tutorial videos:

And catch up or review from anywhere in the Moron Test tutorial Videos.

For the Blog

Describe how the scene[level].main(icon, indx) function is called within the check(icon, indx) function. How are we tracking the icon and index values? Why do we need to track and pass the icon and index values to the scene’s main function? What does the scene’s main function do with these values?

[FINAL] – The Moron Test – Game Logic


Hi this is tutorials based on the 3 videos (11,12,13). Everything was fine this week but I really struggled with the blog question. I gave the question my best shot but I am still a little confused. It would be great if Mike can give the answer to this blog question. Other than that everything else is great.

Video Walkthrough – Videos 11 – 13


Blog Question


Describe how the spread operator is used to convert a node list of selected elements into an array. Describe why we needed this conversion and how the array was helpful for our first test in the game’s logic.

The spread operate allows an iterable such as nodelist. The spread operator is necessary because it looks at many arguments in an function and it passes the argument and adds it at one time. In other words, the spread operator allows us to turn the nodelist into an iterable array with i elements. The i elements is based off how many i elements you have. We are essentially setting iconArr equal to an emepty array with the spread operator calling each of the icons from the nodelist.


[FINAL] – The Moron Test – Map Icons and Draw Scene


Hello once again. This is video 7-10’s work. I am really liking the video walk through. I just would like if they are named better. Instead of naming it videos 7-10 it can be section 1, 2 3. Other than that everything is fine.

Video Walkthrough – Videos 7 – 10


Blog Question


Describe the process for clearing and mapping icons to the DOM. What are the three steps and the core functions? Describe how the four methods used for this process work – createElement, firstElementChild, removeChild, and appendChild.

The process for clearing and mapping icons to the DOM invovled three steps. First you must create the element.

createElement is used to create an HTML element. firstElementChild returns the first child element of the current element. To select the first child of the parent icon you would use firstElementChild. removeChild removes a specific child of that element. removeChild takes an argument and removes the value. appendChild allows you to add a node to the end of the list of child nodes of a specified parent node. appendChild lets us add elements to the parent element. when appendingChild you can pass an argument.

To draw a scene you basically clear the icons and instructions then map the icon and instructions in one function.

function drawScene(level) {
    clearIcons();
    clearInstruction();
    mapIcons(level);
    mapInstructions(level);
}

To clear and map the icons you must first create the variable that contains all the icons/instructions information. In the clear function a while loop is being used. The code snippet below is basically a function with a while loop. While the div iconSpace has a firstElementChild the while loop is true, so the code happens. In the div iconSpace, the firstElementChild is removed, until the while loop becomes false. So it basically goes until it has no elements in the parent.

function clearIcons() {
    while (iconSpace.firstElementChild) {
        iconSpace.removeChild(iconSpace.firstElementChild);
    }
}

To map the icons, the following function is used. For this function we take in the level as a parameter. We then access the scene using (level). Then we append a child in the iconSpace div and build an icon.

function mapIcons(level) {
    scene[level].icons.forEach(function (iconObj) {
        iconSpace.appendChild(build(iconObj));
    })
}

To clear the instructions, the following function is used.

function clearInstruction() {
    while (instructionSpace.firstElementChild) {
        instructionSpace.removeChild(instructionSpace.firstElementChild);
    }
}

To Map the instructions the following code is used.

function mapInstructions(level) {
    let newInstr = document.createElement('h2');
    newInstr.textContent = scene[level].instructions[0];
    instructionSpace.appendChild(newInstr);
}

css.php