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]);
 }

Moron Test Final Blog Post

The Moron test was a fun process to build. I really liked the tutorials because they were easy to understand and easy to follow. Quarantine really made this semester a drag, something I like the most about classes, especially Mikes, are the classroom environment and the people there. Anyway, on to the blog questions.

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.

First, create a variable using a query selector that contains all the instances of the icon and the instruction. In the function there is a statement that checks if there is an element within the space. This is done by using .firstElementChild if there is one then we clear using removeChild and pass the first child 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 uses many arguments and passes them one at a time. This allows us to turn the node list into an array that we can iterate through.

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 this we need level, the icon that was clicked, and the index of the icon. This is passed into main in the scenes.js file. 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. Main is all of the logic functions. Finish is used once all needed clicks are completed. Start and finish are null unless things need to be done after clicks.

Link to Directory with all the work

Week 7 Blog Post

Blogging Questions

Describe what the two arguments of the addEventListener method are and how they work. Give four examples of the first argument and give examples of using an anonymous function vs. a declared function for the second argument. Use the code-insert tool for your examples.

The first argument is what the event listener is ‘listening’ for. The second argument is is a function. When the event happens then the function argument will run. An example of this is if a “click” happens it will run a function.

x.addEventListener("click", myFunction);

Week 6 Blog Post

Blog Question

Describe how the querySelector() and querySelectorAll() methods work. What is the difference between the values returned for each method? Use an example code snippet to support your answer; include sample HTML and JS selectors.

querySelector() is taking the CSS Style selector and It returns the first element that matches a given CSS Style Selector.

function yeet(){
          document.querySelector("p").style.backgroundColor = "cyan";
}

querySelectorAll() returns all elements of the specified CSS selector

function yeet() {
  let n, i;
  n = document.querySelectorAll(".example");
  for (i = 0; i < x.length; i++) {
    n[i].style.backgroundColor = "cyan";
  }
}

Directory Link

Week 4 Blog Post

Blog Question

With the array methods pop() / push() and shift() / unshift(), explain the difference between the returned value of each method and the resulting value of the array? Use an example piece of code with the Enlighter tool to support your description.

Pop() removes an element from the end of an array, making it smaller.

let list = ['a' , 'b', 'c'];
list.pop();
//New list is ['a', 'b']

Push() adds elements to the end of an array.

let list = ['a', 'b'];
list.push(c);
//New array is ['a' , 'b', 'c']

Shift() removes elements from the beginning of an array.

let list = ['a' , 'b', 'c'];
list.shift();
//New array is ['b', 'c']

Unshift() adds elements to the beginning of an array.

let list =  ['b', 'c'];
list.unshift(a);
//New array is ['a' , 'b', 'c']

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaand heres the directory link.

Week[1-7] Blogs.

Week 1:

Describe how you connect an HTML file and a JS file.

You can connect an HTML and JS file with a script tag along with the source.Included inside the HTML file.

<script src="file-name-example.js"></script>

Describe the difference between writing code in the Chrome console and writing HTML/JS files that are then open in Chrome.

When writing code in the chrome console it is usually to test things out and is temporary.The code isn’t saved when you write it in chrome.When you write code in an HTML/JS file and it is opened in chrome that is to make sure the code works.

Week 2:

How can you use “falsey-ness” to determine if a string value can be coerced to a number? Why does this work? What is “type coercion” anyway?

Falsey-ness is used to determine if a value is true or false.Coercion is the process of converting the type of one value to another.Number to string and vise versa.

What do you need to do to convert a for loop to a while loop? In order to convert a for loop to a while loop you have to restructure how it’s written.

Week 3:

Describe the difference between declaring a function and calling a function. Give an example in a code snippet using Enlighter. Have you example use an argument.

Declaring a function basically tells the computer what the function is and should do.Calling a function is executing what you told the computer to do.

function multiple (x) {
Return x * x
}

function test(x,y) {    return y – x;}

Week 4:

pop() removes a string from the end of the array,push() adds onto the end of the array,

shift() removes a string from the front of the array unshift() adds to the front of the array.

var colors = ["red", "green", "blue" ]
colors["red", "green", "blue"]

colors.push("orange") <!-- adds a string to the end of the array -->
colors.pop();     <!-- removes the last string in the array -->
colors.unshift("black")
colors.shift();

Week 6:

Describe how the querySelector() and querySelectorAll() methods work. What is the difference between the values returned for each method? Use an example code snippet to support your answer; include sample HTML and JS selectors.

querySelector() is taking the CSS Style selector and It returns the first element that matches a given CSS Style Selector.

function test(){
        document.querySelector(“p”).style.backgroundColor
}

querySelectorAll()  returns all matching elements instead of only one.

function test(){
        document.querySelectorall(“p”).style.backgroundColor
}

Week 7:

Describe what the two arguments of the addEventListener method are and how they work. Give four examples of the first argument and give examples of using an anonymous function vs. a declared function for the second argument. Use the code-insert tool for your examples.

When  you use the addEventListener method the first argument is what the event listener is listening for. The second argument is what it does after its heard what it’s been listening for specifically.

document.addEventListener(“mouseover”, myFunction);
document.addEventListener(“click”, mySecondFunction);
document.addEventListener(“mouseout”, myThirdFunction);document.addEventListener(“change”, myOtherFunction);

Tutorial and problem-sets.

[FINAL] – The Moron Test – Complete (OPTIONAL)


Hello. I decided the add a little to the Moron Test because I felt I did not contribute much than following the walk through. I wanted to add some important functions such as the stopwatch timer at the bottom. It took me a while to figure it out but I found a perfect example that I doctored up to work on my example. I also wanted to complete all the scenes. I believe I finished all but I may have skipped some by accident. There is about 25+ scenes. I wanted to split up the scene.js file because there was so many scenes to navigate. Some of the starter functions had functions inside of them to satisfy the timer scenes. This was a problem because there was scope issues. I did not attempt the timeline showing your progress in the test. Most of all the scenes are completed.

Timer Function

Completed Majority of the Scenes

This will probably be my last blog post about the Moron Test (unless Mike uploads something). I had fun doing this project. Other than that, I plan to add a Audit linking to all the blog post that I have done. Goodbye!


css.php