FINAL: Moron Test + Blogging Questions.

Before we get into this blog post, I just wanted to say that finishing the semester via distance learning sucked a lot. I feel like it just made things more complex and annoying for some reason, but I pushed through and made it to the end. Instead of breaking everything up into different sections (blog posts), I completed it all in one shot which will be linked below. I’m not sure as to why my webpages are coming out the way they are because they were just working fine when I open them from my desktop, but yeah.

directory: https://alisas.net/dev1/

Blogging Questions:

  • Describe and link to the scene you chose from the breakdown. Give an explanation of the positioning of your i elements and additional icon values.

The scene that I chose from the breakdown would be the second one: “Where are you right now?” I changed two out of the four symbols. The map is now an anchor and the sun is now a moon. I used the same positioning as the code along.

 <i class= "fas fa-anchor" style="
                    color: #323538;
                    left: 20%;
                    top: 35%;
                    font-size: 9rem"></i>

<i class="fas fa-moon" style="
                    color: #fce446;
                    left: 80%;
                    top: 65%;
                    font-size: 9rem"></i>
  • 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.

#1 – select the class (.icons) and create a variable applicable to the space of the icons.

const iconSpace = document.querySelector('icons');

#2 – select the firstElementChild selector. this selects the first child of a parent element.

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

#3 – after using the firstElementChild selector, remove the icons so they are restored as new icons using removeChild. this takes the argument and gets added to the firstElementChild.

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

#4 – once everything is situated, place them together in one function.

function nextScene(){
    clearIcons();
    clearInstructions();
    drawScene(level);
}
  • 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 a useful and quick syntax to add items to arrays, merge arrays or objects and then spreading an array into arguments of a function.

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

You need a main function in the scene[level] to have the icons hidden and for the instructions to appear. This function takes out the game icon and indx when clicking on an icon. Inside the check(icon, indx) function, we are using the same parameters transferred to that function and moving it to the scene[level].main(icon, indx) function. Inside the check(icon, indx) function, we are using the same parameters transferred to that function and move it to the scene[level].main(icon, indx) function.

The main function is called whenever there’s a click and only if the scene has the accurate icon clicked (the answer) because the playScene) (function includes an event listener and calls the check(icon, indx) function whenever a click is made. I’ll show an example of the main function 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]);
 }

Join the Conversation

1 Comment

  1. I agree definitely less than ideal!

    I’m glad to see that you worked through so much of this on your own though. It’s an impressive feat! I hope you still got a lot out of it and hope we’re lucky enough to be all back together in the fall.

Leave a comment

Leave a Reply to mbs Cancel reply

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

css.php