[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) {

    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) {
        scene[level].main(icon, indx);
        if (clickCount === clicksNeeded) {
            if (scene[level].finish) {
            } else {
                console.log('scene complete');

    } 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 ………….

Join the Conversation

1 Comment

  1. Yeah. I kind of shuffled through the description of the use of the a4.js file. It’s really for just one scene that calls the a4() function. All it does is return an array of 20 or so objects with icon properties. It was easier than hand coding these objects and is used to start level 27.

    Glad you figured it out though! And I hope you enjoyed the class and the project at the end.

Leave a comment

Your email address will not be published. Required fields are marked *