💻
[JS] The Interactive Web
CS4All Resources
  • Curriculum Overview
  • 📬Leave Us Feedback
  • Unit 1: HTML & CSS: Good vs Bad Design
    • 🔮Unit 1 Overview
    • U1LA1.1: Building with HTML
    • U1LA1.2: Structuring Pages with Divs, Classes, IDs
    • 🗃️U1LA1 Mini Project: My Fan Page Part 1
    • U1LA2.1: Styling your page with CSS
    • 🗃️U1LA2 Lab: My Fan Page Part 2
    • U1LA3.1: Layout with CSS Grid
    • 🗃️U1LA3.1 Lab: Grid Interview
    • U1LA3.2: Layout with Flexbox
    • 🗃️U1LA3.2 Lab: Flexbox Interview
    • U1LA4.1: Focus on Design in HTML && CSS
    • U1LA4.2: Breakpoint Lesson
    • 🗃️U1LA4 Lab: ChefHub Goes Mobile
    • U1LA5.1: Creating Accessible Websites
    • 🗃️U1LA5 Lab: What Do You Hear? Make it Accessible
    • U1LA6.1: Working with CSS Frameworks - Bulma
    • 🗃️U1LA6 Lab: CheeseBook Computers with Bulma
    • 🎨Unit 1 Final Project: My Travel Page
  • Unit 2: Intro to DOM Manipulation Basics
    • 🔮Unit 2 Overview
    • U2LA1: JavaScript Essentials - Variables to Arrow Functions
    • 🗃️U2LA1 Mini Project: JavaScript Essentials
    • U2LA2.1: DOM Manipulation with JavaScript Click Interactions
    • U2LA2.2: Accessible Shopping Cart
    • 🗃️U2LA2 Mini Project: The National Horse Race
    • U2LA3: Inputs and Conditionals
    • 🗃️U2LA3 Mini Project: The Interactive Site
    • U2LA4: Add, Remove, and Toggle
    • 🗃️U2LA4 Mini Project: The Cross-Wired Lightbulbs Puzzle
    • 🎨Unit 2 Final Project: Input-Output Helper Site
  • Unit 3: Advanced DOM
    • 🔮Unit 3 Overview
    • U3LA1: JavaScript Arrays, Iteration, and Objects
    • 🗃️U3LA1 Mini Project: Arrays, Iteration, and Objects Lab
    • U3LA2.1: JavaScript Essentials - Variables to Arrow Functions
    • U3LA2.2: Typeahead Search
    • U3LA2.3: Fuzzy Matching - Autocorrect
    • 🗃️U3LA2 Mini Project: Fuzzy Matching Personality Quiz
    • U3LA3.1 JavaScript Mutability
    • U3LA3.2: Advanced DOM Manipulation
    • 🗃️U3LA3 Mini Project: Card Organizer
    • U3LA4: Local Storage
    • 🎨Unit Final/U3LA4 Project: Twenty in Ten Game
  • Unit 4: Intro to APIs
    • 🔮Unit 4 Overview
    • U4LA1: Intro to APIs
    • U4LA1.2: JavaScript Arrays, Iteration, and Objects
    • 🗃️U4LA1 Mini Project: Deck of Cards: Higher Lower
    • U4LA2: Connecting to Closed APIs using the Giphy API
    • 🗃️U4LA2 Mini Project: DIY Dictionary
    • U4LA3.1: APIs vs SDKs
    • U4LA3.2: Requests on the Web - GET & POST
    • 🎨Unit 4 Final Project: API GUIs
  • Unit 5: Simple Websockets and Final Project
    • 🔮Unit 5 Overview
    • U5LA1: Servers and Express
    • 🗃️U5LA1 Mini Project: Express Lab
    • U5LA2: Intro to WebSockets
    • 🗃️U5LA2 Mini Project: Simple Sockets Lab
    • U5LA3: Socket Servers
    • 🗃️U5LA3 Mini Project: Socket Server Lab
    • U5LA4 [TBD]
    • 🎨Course Final Project Guide
Powered by GitBook
On this page
  • Teacher Notes
  • Prompt
  • Exemplar
  • Culturally Responsive Best Practice
  • Extra Help?
  • Extensions
  1. Unit 3: Advanced DOM

U3LA2 Mini Project: Fuzzy Matching Personality Quiz

How can you use advanced data structures and functional computing with DOM elements and user interaction?

PreviousU3LA2.3: Fuzzy Matching - AutocorrectNextU3LA3.1 JavaScript Mutability

Last updated 1 year ago

Teacher Notes

In this lab, students will have the opportunity to build a personality quiz with some guidance. The teacher will walk students through a trivial version (the exemplar), and students will, similar to a unit project, brainstorm ways to personalize it adding different forms of inputs, creative outputs, and implementing concepts in the previous few lessons.

Most students will have a hard time coming up with an algorithm that will calculate the final result of their test even with guidance below. Prepare some simple visual examples that students can use to get started. For example if there are 4 results that can be put on an XY-axis, draw what this may look like and show how each questions will push the quiz taker higher or lower on an axis.

Students should utilize the Starter Code ( | ) to begin this project.

Prompt

What is your personality type? Which character from your favorite movie pr show are you most like? What color is your energy? In a personality quiz, you answer questions to discover what category you most align with. First code along as you see how it's done. Then, make it your own!

Directions: Walk through the following steps to complete and take the sample "Fuzzy Matching Quiz" based on the Myers-Briggs personality test. Then, in the challenges, you'll have a chance to expand it and personalize it to your own Quiz.

  1. The trickiest part about doing a personality quiz is taking the user's inputs and converting it into an output. Later you will be given some ideas on different ways to do this, but for now we will do this: There are 4 questions on the website. For each question, you can be 1 of 2 personalities. At the end, you will be a culmination of 4 total personalities (indicated by 4 letters). For example:

The Input

  1. First thing that happens is that a user selects the radio button inputs. Use querySelectorAll() to select all the radio inputs. Then, add an event listener to all of them. For now, just console log the value. Try this yourself before seeing the code below:

    const inputs = document.querySelectorAll("input");
    
    inputs.forEach(input => {
        input.addEventListener("click", (e) => {
            console.log("Value", e.target.value)
        });
    });
  2. Let's make some observations: When you open the console, notice that a single letter is outputted. This letter corresponds to the matching personality. Look at the letterDescriptions variable in the script.js for some examples. Now, change e.target.value to e.target.name and notice what is outputted. With the name and the value, you can create an object with the user's results.

    let results = {
        first_letter: 'E',
        second_letter: 'S',
        third_letter: 'T',
        fourth_letter: 'J'
    }
  3. Create the above object with an empty string for each value ''. Then, change the event listener so that it sets the object on click.

    inputs.forEach(input => {
        input.addEventListener("click", (e) => {
            const name = e.target.name;
            const value = e.target.value;
    
            results[name] = value;
    
            // Optional log but helpful
            console.log(results)
        });
    });

    You can log the results each time and notice what happens when you start filling out the quiz.

The output 4. Take the time to make another observation. When you click the button, notice that most of the output is set up and formatted for you. There should be 4 badges each with 1 letter, the word/title that that letter represents, and a description for that letter. However, you may have some text missing:

  1. Go into the script.js and use the letterDescriptions object to fix the displayBadges() function so it looks like the example above. After doing so, the code segment should look as follows, and the quiz should be ready to take:

    <div class="content">
        <h1 style="text-align: center">${letter}</h1>
        <p><b>${letterDescriptions[letter].title}</b></p>
        <p><b>Description:</b> ${letterDescriptions[letter].description}</p>
    </div>

Exemplar

Culturally Responsive Best Practice

Note: scope out the resources provided. The quizzes change constantly, and it can not be assured that they are appropriate for school. You may instead want to compile several examples that you have pre-scanned and feel comfortable using in the classroom.

Extra Help?

  • Quizzes to get inspiration:

Extensions

Use the following steps to plan out how you will change the personality quiz to be your own.

Directions

  1. With your partner, do some research and exploring and think up what kind of personality quiz you'd like to set up. It can be silly like "What fruit are you?" or serious like "What vacation is best for you?". If you're not sure, go with the vacation spot!

  2. Then, write down all the possible results your quiz can end in. Will there be only 2 (ex. "Your more left brain than right brain" or "Your more right brain than left brain")? Or, will you have several results (ex. "Out of all the fruits your most likely a watermelon!")? If you're not sure, we recommend picking 3-4 vastly different results like "Space", "Cabin in Alaska", "Staycation", and "New Orleans".

  3. Inputs: For the walk-through above, radio buttons were the inputs for the quiz. Will you use radio buttons with words or pictures to select from, will you use drop-down menus, will you have checkboxes to allow multiple selections? Also, think about how you will store the user's responses. Most common is using radio buttons and an object. That's what we'd recommend if you're unsure.

  4. Calculating Results: Here are some ideas for how you can narrow down the user's inputs into some results. Choose 1:

    • [MILD] - Each answer in the quiz can award positive points to a category or personality type. At the end of the quiz, which ever personality type has the most points is the one the user will get.

    • [MEDIUM] - If your results can be put on a scale, start a score at 50 and have each question add or subtract points to the score. At the end, use the number to give the user a different personality type. (ex. "Netflix and PJs" would be a 0-35% => always likes to be alone, "Party Animal" would be a 65-100% => never likes to be alone, and maybe even "Hard to Get" would be a 35-65% => likes a balance of both) You can split this in 2, have 3 zones, or how ever many zones you need.

    • [SPICY] - You can use multiple scales! Each question can add or remove points to one or more scales. For example:

      • Scale1 = likes to be outside vs. likes to be inside

      • Scale2 = likes to be along vs likes to be with others Based on the combination of the 2 scales, you can give the user a different personality type (ex. outside & alone = "Vacation in Space!") If it helps, think of this one like an XY graph.

  5. Outputs: Finally, what will you show the user once they hit submit?

    • [MILD] - Will it be a single output?

    • [MEDIUM] - Will you show a few or all possible outcomes and their percentage in each category? (ex. "You're 70% lion and 30% mouse")

    • [SPICY] - Will it have a more detailed description or a unique picture to go with it?

  6. Now that you have your plan, get your quiz up and running! Refrain from focussing on font, images, color and other styling for now. Also, (IMPORTANT) start with 1 question, and add more once you have it working.

  7. Once, you can complete the quiz and get a unique result, go back and add styling, images, and more questions.

Reflection Questions:

  • What are you most proud of? What did you struggle the most with?

  • How much preplanning did you do before you coded? How did it help? How would doing more or less preplanning help or hurt final outcome of your personality quiz?

  • With more time, what else would you have added or changed?

Take a look at this finished version ( | ) for the finished version of the site.

Scope out the strategies students plan to use when creating the quiz to ensure they stay on track with the curriculum, but allow students to explore themes that they identify most with. Consider spending a few minutes asking the students to find the funniest or most interesting quizzes they can find. Allow them time to explore resources like , , or ...

Long video on making

🗃️
repl.it
github
BuzzFeed
PsyCatGames
PlayBuzz
more
What Fruit Are You? - Buzzfeed
What's your road trip personality? - Truity
Another Short Myers-Briggs Test
JS Buzzfeed-style Quiz
repl.it
github
Myers Briggs Example
Badge Example