[FINAL] – The Moron Test – The Game Board


Hello all. I liked the video that professor put up on YouTube. I had a understanding how to place icons altering the index.html but was not that good with the JavaScript part. I liked how we can use data structures to build icons. I am finally using JavaScript to build something. Below will be the code/ notes from the video tutorial.

Video Walkthrough Video 1-6

I chose scene 25 because I felt it was the best scene to choose. I had an idea of using a clock with numbers around it but the prompt said to use three icons from FontAwesome so I had to alter my choice.

Version 1 – Scene 25 Remake — MY ATTEMPT

When creating my version, I did have a “+” icon in the center. I asked someone how it looked and they suggested that I remove the icon. I am limited to certain choices using FontAwesome. The instructions is to touch the rain icon and then the snow icon three times consecutively. The list below will be the walk through of the scene once I give the brains to the JavaScript.

  1. Rain Icon, click
  2. Instructions removed
  3. Snow Icon, click
  4. Snow Icon, click
  5. Swap Icon Snow Icon and Sun
  6. Swap the colors of Snow and Sun.
  7. Snow Icon, click

I am essentially trying to trick the user at the last click. Most impatient people will click the icons fast without thinking,


Below is an example of an “i element” in the HTML file. This “i element” has an inline style which include color, positioning and size. This specific element has a color and is positioned to the middle of the page using left 50%. This centers the icon in the x axis(left to right). The Y-axis (top to bottom) is set by stating top:25%. This makes the element show on the top. The font-size is set to 14rem. If you want to set the icon lower, you would increase the top percentage.

<i class="fas fa-cloud-showers-heavy" style="
    color: #3babfd;
    left: 50%;
    top: 25%;
    font-size: 14rem;">
</i>

I am not sure if I was supposed to remake the scene or to re design it. I tried to make something different.


Join the Conversation

1 Comment

  1. Hey, totally cool that you’re redesigning the scene with your own story elements. And I see you’re getting ahead with having already built the data structure and the icon builder function! I’m going to be working on the next couple of videos soon, which will include how to clear and then map icons.

Leave a comment

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

css.php