Moron Test Complete

Problem Set

  • Test your scenes.js file against v5
  • Make any adjustments needed to get your code working (for example add color variables if you wish)
  • If you’re adventurous consider playing with v6beta of the code which adds scene[level].start and scene[level].finish methods. There’s a number of other changes from v5 in there to grapple with, but if you’re up for learning how to add delays, additional screens that are before the scene[level].main, you can do it.

Blogging Assignment

Post your scenes.js file and describe any issues with the scene levels. Reference the scenes they based on from the original moron test breakdown. If you worked on any additional features to your code, create a v6beta of your own and post all files: moron.jsscenes.jsindex.htmlstyle.css. Please describe what features you’ve added and how.

Final Game

Within my Final Game file I have had many issues. The most predominate is that my my images are stuck in their positions. I have tried changing the placement through my Moron.js html and Scenes.js. My switch function does not work either. I think it also has to do with my images being locked in place.

Moron Test Final Version

Final Version

I couldn’t get as far as some of my classmates did with the scenes but I’m proud of how far I managed to go with this assignment. Coming into this course I had never seen coding before and everything was brand new to me. As an English major, it was hard for me to get used to the technicalities and words I had never used to mean what they meant in this class. I remember the first day, feeling like everyone was speaking a foreign language and am now amazed that I can understand at least 3/4 of what’s being said.

Issues with my scenes:

  1. I couldn’t get my scene 10 to work where the faces would switch from mad to happy.
  2. I couldn’t get my last scene (scene 27) to show the instructions.

Moron Test v5

v5.js

How does the new main function access the values of icon and i? How are those values passed from the moment created in the event listener to the scene level object’s main function? FYI this is an example of “closure.” Closure is the passing of variable values from an “outer” function to an “inner” function.

The main function is what accesses the values of both icon and i. It does this through the runScene function.

  1. eventListener is used to store the icon and i
  2.  the values of both i and icon are passed to runScene from the eventListener
  3. the runScene passes the values back to the main function we created.

 

Moron Test Final

I was able to get all of my scenes working against the V5 code version.

Here is my (click on it to play) Final version.

scenes.js

moron.js

style.js

I made some changes to the CSS file, the scenes.js, and the moron.js  as I was needed to able to get the scenes to work. I didn’t follow from the original moron test break down assigned scenes but I have followed V5 and a little bit from V6 version.

I have struggled with hiding option after clicking on an object so then I carefully followed and got a solution. I have mentioned (main) as our key and then declared a function that passes the icon, i values. This is the way for a scene level we can set specific actions. I implemented in the level 01.

case 1:
                    icons[1].classList.add("hidden")
                    break
                case 2:
                    icons[2]
                        .classList.add("hidden")
                    break

 

I added to the moron.js/scenes.js set of functions called moveIcon(i, left, top). It basically resetting the location in the window of an icon based on their index value, left position, and top position.

//new function in moron.js
function moveIcon(i, left, top) {
    icons[i].style.left = `${left}%`
    icons[i].style.top = `${top}%`

// new function in scenes.js
                case 2:
                    //calling each index value
                    icons[0].style.left = "71%"
                    icons[0].style.top = "27%"

                    //OR using the moveIcon(i, left, top)
                    //function now in moron.js
                    moveIcon(1, 20, 60)
                    moveIcon(2, 20, 27)
                    moveIcon(3, 50, 55)

                    //replaced by the above moveIcon calls
                    // icons[1].style.left = "20%"
                    // icons[1].style.top = "60%"
                    // icons[2].style.left = "20%"
                    // icons[2].style.top = "27%"
                    // icons[3].style.left = "50%"
                    // icons[3].style.top = "55%"
                    break

However, It was working but not perfectly. I should change some of the % values for positions.

This course was definitely very difficult for me. I learned a lot of new things but I still feel like I have basic knowledge of coding some of the topics that we covered. Honorable Professor helped me a lot during my various problem sets.  Overall, I definitely need to work on javascript and rewatch some of the tutorials.

Moron Test Final / Version 6 Beta

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

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

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.