Timing Functions and Start / Finish Functions

blog question:

Basically every scene that we create will have a start, finish, and main objects with its declaration. each of these objects corresponds to different things happening. The start object deals with any set of instructions that needs to be run during the start of the scene. we initialize this in our function play scene, so when a new scene is called and you play the scene the instructions are run. While the finish object, in essence, counts the number of clicks needed to complete the scene. once the user has used up all the clicks the finish object will run any functions that are passed to it. we call our finish object in our check function, where we check ” if (clickCount === clicksNeeded) “.



week 9,10,11 and 12- The final Video Walkthrough AkA The End

I don’t know if what prison feels like but if its anything like quarantine you will never see me do anything bad or mischievous ever again.

but here some codes

week 9- Video Walkthrough part 2

week 10- Video Walkthrough part 3

week 11- Video Walkthrough part 4

week 12- Video Walkthrough part 5

For the blog

  1. 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 – createElementfirstElementChildremoveChild, and appendChild.

we have to create a variable that contains all the instances of the icon and the instruction using a query selector. in the clear function, we use a statement that check if there is an element within the space we are looking at, to accomplish this we use “.firstElementChild” if there is one the next step is to clear either the icon or instruction using removeChild in which we pass the first child of the element as a reference. For the mapping function we take in the level as a parameter we then access that scenes icons using the level.

2. 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 operator is necessary because it looks at many arguments in a function and it passes the argument and adds it at one time. it allows us to turn the nodelist into an iterable array with a [i] elements. The i elements is based on how many i elements you have. We are essentially setting iconArr equal to an empty array with the spread operator calling each of the icons from the nodelist.

3. 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?

within our “check(icon, indx)” function we use “scene[level].main(icon, indx);” in order to access scene-specific instructions. in order to access 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 the said icon which is passed onto main in the second js file, scences.js, main takes these values and if there are scene-specific instructions they will take place.

4. 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?

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 need to be done after the clicks are done.

[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?

css.php