Using Quizizz in the Classroom

Quizizz is an app and website that is quite similar to Kahoot with a few interesting additions. Like Kahoot, a user can create a series of questions to ask a group of people who compete to answer them correctly and speedily. Scores are determined according to whoever answers correctly first.

Quizizz, unlike Kahoot, adds some additional features to the game itself including different Theme choices and Power-ups. And in Quiz creation, whereas Kahoot only has two “free” question types (multi-choice and true/false), Quizizz has a total of FIVE possible options:

  1. Multiple choice (one correct answer)
  2. Checkboxes (more than one correct answer)
  3. Fill in the blank (correct answers + alternatives)
  4. Open-ended (no correct answers, opinion based)
  5. Poll (multiple choice – or checkboxes – opinion based)

Quizizz also adds the option of connecting to Google Classroom to assign quizzes for homework to your classes.

Uses for the Classroom

  • Surveys (interest, voting, etc)
  • Competitive Quizzes / Games
  • Informal skills / knowledge tests & assessments (Reports)
  • Assign as Homework (Google Classroom connection)

Recommendation: As with Kahoot, Quizizz also has an app where it is possible to create and edit quizzes. However, I it is still slightly easier to find everything on the website (the screen is larger), and you will likely be hosting your quizzes from the computer. So it is a good idea to familiarize yourself with the website first.

Step 1: Sign up / in

  1. Go to quizizz.com and click “Sign up”
  2. Sign up with your Google account (or email)***
  3. Select your role (Teacher)
  4. Select how you are using it (At a School)
  5. Welcome to the Dashboard

*** Important note about “Sign up”

In the Sign Up screen, you have TWO options:

  1. Sign up with Google
  2. Sign up with email

Whichever option you choose to sign up with MUST be used to sign in later (and they do not overlap each other). For example:

  • if you sign up with Google, you CANNOT use Email / Password to sign in later
  • if you sign up with Google, you MUST use Google to sign in later

Why “Google” and “Email / password” are not the same

The reason for this is because of the authentication (sign in) method used by the website.

  1. Google Sign In log you in with an authentication TOKEN
    • (A separate window opens where you log in to your Google account separately. Once you authenticate (login) with Google, your email service sends a unique authentication TOKEN to Quizizz in order to confirm your identity. So, in this case, Quizizz does NOT store your password at all, but rather relies on the TOKEN provided by Google to log you in.)
  2. Email / password will remember both your email AND your password
    • (The password is actually passed through a hashing algorithm in order to scramble it so it can’t be intercepted by another user. The scrambled password is matched with the scrambled password stored in the database for your user ID, and if the two scrambled passwords match, your identity is confirmed and you are logged in. So, in this case, Quizizz stores BOTH your email AND scrambled password in their database.)

That is why the two sign in methods are not compatible (interchangeable).

  1. Email / password = uses your email / password (and remembers both)
  2. Google = uses a TOKEN (and remembers only your email)

Step 2: Search for / Create a Quiz

  1. “Search” for quizzes to use
    1. You’ll be shown a list of relevant search results
    2. Select one to view (you can also Like or Save them to a Collection). From here you can Play Live, Assign HW, or Practice
  2. “Create” a new Quizizz of your own
    1. Write your own question at first to familiarize yourself with the Question Types
    2. There are FIVE Question Types shown above:
      1. Multiple choice (one correct answer)
      2. Checkboxes (more than one correct answer)
      3. Fill in the blank (correct answers + alternatives)
      4. Open-ended (no correct answers, opinion based)
      5. Poll (multiple choice – or checkboxes – opinion based)
    3. After you finish creating questions, you’ll still be able to Edit them
    4. Click “Done” in the upper-right to finish the Quiz (you must choose a grade level, and can also add additional details)
    5. The Quiz will then appear in “My Library”
    6. If you click on your finished Quiz, you can Play, Assign HW, or click “Edit” in the Quiz details box to edit it further

Step 3: Play / Assign a Quiz

To Play or Assign a Quiz as Homework, first select the Quiz you want either from Search or from “My Library.”

  1. From Single Quiz View
    1. Assign HW – brings up options for date, time, and class (linked to Google Classroom)
    2. Play – gives a few options like Team, Classic, and Test (choose Classic)
  2. The Teacher’s View shows the Quiz ID students need to enter to join the quiz
  3. Students navigation their Internet browsers to joinmyquiz.com and enter the ID
    1. Students may choose a Nickname (and other options)
    2. Then, select a Theme
  4. From the Teacher’s View, once the students have all joined, they may now “Start” the Quiz
  5. Students are show a question
    1. And may click their answer – they are awarded points and bonuses depending on their answers and time elapsed
  6. Teachers can watch student progress through the quiz
    1. And at the end of the quiz, they are shown a report with statistics from the quiz results
  7. Students also can review their own performance after the quiz

Step 4: Quiz Reports + Google Classroom

As mentioned above, at the end of a quiz:

  1. Teachers can immediately view the quiz results
  2. Students also have their own quiz results review page
  3. Additional Reports can be found in the “Reports” link in the left sidebar
    1. A single report view shows the full list of students who took the quiz as well as all their answers, and statistics about the quiz. It’s well worth investigating.
  4. Finally, Google Classroom can also be linked to Quizizz from the “Classes” link in the left sidebar

I hope that gives you a good overview of using Quizizz in your classrooms. There is much to explore, so just take some time to familiarize yourself with the program. Again:

  1. I recommend getting familiar with the website FIRST
  2. And then going back in to the app to learn it

Once you know what is available in Quizizz through the website, it’ll be a lot easier to find it in the app.

Good luck!~

Using Kahoot in the Classroom

Kahoot is an interesting app and website that allows one user to create a series of questions to ask a group of people who compete to answer them correctly and speedily. Scores are determined according to whoever answers correctly first (points are allocated in decreasing amounts to second place, third place, and so on).

Uses for the Classroom

  • Competitive Quizzes / Games
  • Informal skills / knowledge tests & assessments (Reports)

Recommendation: Although the Kahoot App also makes it possible to create and edit Kahoots, I remember doing MOST tasks on the computer because it is slightly easier to find everything (the screen is larger), and you will likely be hosting your Kahoots from the computer. So it is a good idea to familiarize yourself with the website first.

Step 1: Sign up / in

  1. Visit kahoot.com
  2. Click “Sign up” in the upper-right hand corner
  3. Select your Account type (Teacher)
  4. Select your Workplace (School)
  5. Create account ***
  6. Select your Edition (Free)
  7. Provide additional info (optional)
  8. Explore the Dashboard (Get Started)
    1. See how it works
    2. Create kahoot
    3. Host kahoot

*** Important note about “Create account”

In the Create Account screen, you have THREE options:

  1. Email / password
  2. Sign up with Google
  3. Sign up with Microsoft

Whichever option you choose to sign up with MUST be used to sign in later (and they do not overlap each other). For example:

  • if you sign up with Google, you CANNOT use Email / Password to sign in later
  • if you sign up with Google, you MUST use Google to sign in later

Why “Google” and “Email / password” are not the same

The reason for this is because of the authentication (sign in) method used by the website.

  1. Email / password will remember both your email AND your password
    • (The password is actually passed through a hashing algorithm in order to scramble it so it can’t be intercepted by another user. The scrambled password is matched with the scrambled password stored in the database for your user ID, and if the two scrambled passwords match, your identity is confirmed and you are logged in. So, in this case, Kahoot stores BOTH your email AND scrambled password in their database.)
  2. Google and Microsoft Sign In log you in with an authentication TOKEN
    • (A separate window opens where you log in to your Google or Microsoft account separately. Once you authenticate (login) with Google or Microsoft, your email service sends a unique authentication TOKEN to Kahoot in order to confirm your identity. So, in this case, Kahoot does NOT store your password at all, but rather relies on the TOKEN provided by Google or Microsoft to log you in.)

That is why the two sign in methods are not compatible (interchangeable).

  1. Email / password = uses your email / password (and remembers both)
  2. Google / Microsoft = uses a TOKEN (and remembers only your email)

Step 2: Create / find a Kahoot

You may wish to investigate Kahoots that have already been created first to get an idea for the kinds of things that are possible. Click “Discover” in the top menu to do so. Later, you may wish to “Create” your own (top-left button).

  1. “Discover” Kahoots (top menu button)
    1. Search for a Kahoot that looks interesting
    2. Select it to view the questions
    3. Some Kahoots you may be able to Edit, or add to your own Library. Others you may only be able to Favorite and Play with your class
  2. “Create” your own Kahoot (top-right button)
    1. Create a New Kahoot or use a Template
    2. You can modify an existing Template
    3. Or, if you are creating a New Kahoot, type your own questions and answers
    4. Question Types:
      1. Quiz (4 choices)
      2. True / False (2 choices)
      3. Typing (premium)
      4. Puzzle (premium)
      5. Poll (premium)
      6. Slide (premium)
  3. After creating a Kahoot (or using a Template), find it in your Library of Kahoots under the “Kahoots” button in the top menu

Step 3: Host your Kahoot

To host / play your Kahoot:

  1. View your Kahoots Library
  2. Click “Play” on the Kahoot you want to host
  3. Click “Teach” to play it in class
  4. Select “Classic” in Game options (you may also want to change or disable the Lobby music toward the bottom of the screen)
  5. When you Start the game
    1. The screen on the right will appear on your projector / computer
    2. Students should go to kahoot.it to enter the Game PIN on their devices
    3. Students can choose a Nickname (caution: some students may try to choose joking or rude nicknames)
    4. Once all students have entered the Game PIN and a nickname, Start the Game
  6. Questions will be shown on screen with a timer
  7. Students select the correct answer from the group of symbols on their device
  8. After all students have answered (or time is up) the correct answer will be shown on screen
  9. Finally, a leaderboard will be shown and tally up each player’s points

Step 4: Kahoot Reports

You will also be able to see a detailed analysis of the results of a played Kahoot in the “Reports” tab.

  1. Click “Reports” in the top menu
  2. Select the Kahoot you want to view reports for
  3. Detailed analysis includes:
    • Correct %
    • Difficult questions
    • Students who need help
    • Students who didn’t finish

I hope that gives you a good overview of using Kahoot in your classrooms. There is much to explore, so just take some time to familiarize yourself with the program.

  1. I recommend getting familiar with the website FIRST
  2. And then going back in to the app to learn it

Once you know what is available in Kahoot through the website, it’ll be a lot easier to find it in the app.

Good luck!~

Learn JavaScript by Building a Shopping App in CodePen

Learn by doing! The best way to learn JavaScript is with projects, so we’ll be building a shopping app in CodePen.

In this tutorial, we’ll learn how JavaScript can manipulate data and the DOM to create a multi-screen, dynamic web app, right inside CodePen. We will walk through the app-building process together: from creating app screens in HTML & CSS, to adding basic JavaScript functionality with button presses, to adding basic data processing. This tutorial is aimed at beginner developers.

Lesson Outline

The following is a tutorial that was presented at JS Conf Korea 2019 on September 3, 2019. It is a 4-part tutorial. The first part (Introduction & Overview) is presented here, but the other three parts are part of an online course I’m creating.

  1. Introduction <this part>
  2. Building the Shopping List Screen
  3. Building the Store Screen
  4. Building the Cart Screen

Material required

Introduction

As you may have noticed in my bio, my name is Aaron Snowberger, and I’m a frontend designer/developer who likes to dabble in backend and mobile technologies. My current passions include React, React Native, Node, and the WP REST API. I’m also a Google Certified Trainer who has taught computer science and graphic design in high school since 2013. I’m passionate about helping new learners discover the joys of JavaScript.

The web project this tutorial introduces is for a project that I built with my high school students in the Spring 2019 semester.

My class began the project with a review of HTML structure and CSS styles in order to create the overall look and feel of the web app. But the project’s main focus was to introduce my students to the beauty of JavaScript, and that is what the bulk of the tutorial will cover.

Why JavaScript

There are many reasons why JavaScript is a particularly useful programming language for new learners. Here are just a handful of them:

  1. JS is the third leg of the code-tripod that builds websites. Whereas HTML & CSS are not really programming languages per se (they are markup languages concerned with presentation, not function), JS is actually a functional programming language that can create interactive applications – and not just online brochures.
  2. JS is everywhere. The majority of the world’s websites utilize JavaScript somewhere – it provides much of the interactivity on a site – and it can also be used to build mobile applications (React Native, NativeScript). As such, the majority of the world’s population with access to the Internet is in contact with JavaScript on a daily basis.
  3. JS is noob-friendly and (relatively) easy to learn. Compared with many other true programming languages, JavaScript’s syntax and key concepts are rather straightforward and relatively easy to learn. So much so that middle school and high school students can pick it up, and there are even some block-building languages (like Blockly and Scratch) which are based on JavaScript and taught to even younger students. JavaScript is also one of the easier languages to debug.
  4. JS is also quite powerful. Some of the top websites in the world like Facebook, Instagram, AirBnB, and Netflix utilize JavaScript in their webpages and mobile apps. JavaScript can be used to power either the frontend or the backend of websites, and there are hundreds of very powerful frameworks and libraries of code available to work with.
  5. JS is undoubtedly fun to work with. By its very nature, powering websites and providing their functionality, JavaScript is highly interactive and visual, giving you the ability to build animations, powerful UIs, games, and apps. Plus, it’s even more fun when you realize you can build something that millions of people around the world can enjoy together.
  6. Learning JS can lead to a bright future. The JavaScript ecosystem is rapidly evolving and has seen much growth and change in recent years. As such, JavaScript skills are in high demand and salaries for skilled JavaScript developers are also high. Additionally, by learning the fundamental concepts all programming languages share (loops, conditionals, functions, classes, and so on), students can more easily pick up skills in additional – or more difficult languages as well.

About the Shopping App Project

AKA “How we’ll build this…”

JavaScript is primarily used to access and modify elements within a website. Therefore, we need to learn JavaScript by coding a project that has multiple moving parts, buttons, and interactive elements. A shopping app provides just such an opportunity.

Project Considerations

Each of the three “screens” in this app will be discussed in more detail below, but here is a quick overview of what we want each screen to do and how.

  1. Shopping List Screen
    • Performs like a To-Do List
    • We click a button to “add” or “remove” an items from the list
    • Type in the input field to “create” a new item (task)
    • Drag an item to the side to “delete” it (animate this)
    • Include Reset buttons to restore the original list to its defaults
    • Also include additional visual feedback (CSS animations) so the user can see what effect their interactions are having on the app
  2. Store Screen
    • This needs to include a collection of data – say at least 20 different items we can Search through and Add to our cart
    • We want to be able to change the View Type (from list to grid and vice versa – CSS Grid is a perfect tool for this)
    • We want to include filters such as Category, Price, and so on
    • We also want the Store to be searchable
    • We need to include some functionality to “Add” items to our cart so that when we click over to the Cart Screen, those items are there
    • We also need some kind of animation or visual feedback for the user (this can be handled with pop-up “Toast” notifications)
  3. Cart Screen
    • The cart will contain “cloned child nodes” from the Store Screen when the user clicked “Add to cart”
    • It needs to be able to dynamically update quantities and prices
    • And we also want to include some kind of nifty Checkout progression or modal and possibly a nice “shipped out” animation

First, some notes on HTML & CSS

  • HTML Structure
    • Use semantic markup (<nav> or <aside> rather than always <div>) & descriptive class names (like "shopping-list-item")
    • This helps you to think in a more modern, modular style when you build the structure (like components) first
  • CSS Style
    • Some useful visual indicators and design tools include:
      • My personal favorite design touch is using a dark bottom-border and light top-border on each list item – to give the appearance of three-dimensions and shadows
      • Transitions for everything are useful
      • Animations & keyframes also allow us to give visual clues to the user by doing things like jiggling the Cart icon when an item is added or removed
      • Additionally, transforms, opacity, and positioning can help us a lot
    • CSS Grid & Flexbox are also particularly useful tools (especially since React Native utilizes flexbox, so it’s good practice here if we want to work with React Native later)

1: Shopping List

Originally, this shopping app was designed to behave primarily like a To-Do list. So, it was more like a shopping list app that incorporated the following:

  1. A pre-built list of items
  2. To which new items can be added (input field)
  3. Items can be clicked on and marked as completed (purchased) with a strikethrough
  4. Or items can be removed from the list altogether (by dragging it off the screen)

After these initial functions were built, it seemed like a good idea to allow users to also do them in bulk, so the following buttons were added:

  1. Empty Cart – systematically goes through the list of items and removes the strikethrough, also returns the cart number to zero
  2. Delete List – systematically (and programmatically) removes each item from the list by “dragging” it off the screen in order
  3. Reset All – systematically resets the list to its original defaults by adding all the items back in

In addition to the functionality listed above, in order to provide adequate visual feedback to the user, CSS transitions, animations, and pseudo-elements were added to make the app appear as though every button click or input was having a (non-simultaneous) effect.

This meant that all the functionality of the app was given a 300-1200ms transition, for adding, deleting and so on. “Purchased” items appear to float up “into” the shopping cart, and bulk actions don’t happen all at once, but sequentially with a short delay between each item.

Shopping List Toolbox

The following is a list of necessary JavaScript knowledge to add to our mental toolbox in order to build the Shopping List screen:

Let’s build the Shopping List Screen!

Checkout the finished product in the CodePen below. Investigate the JS code in the editor to learn how it all works.

Completed Shopping List Screen.

2: Changing Screens

Technically, this is not another screen that we need to code, but rather the ability to seamlessly transition between screens. Therefore, it deserves its own subsection in which to discuss WHAT we want to do and HOW we want to do it.

  • Considerations:
    • Let’s make the screens appear to shift from left to right as we click between them. This means we need to make the width of our app <div> at least as wide as three screens, and then we want to absolutely position it where it needs to be for each visible screen.
    • Additionally, we need to change how the input field works:
      • On the Shopping List Screen, it adds items to our list
      • On the Store Screen, it should search the store
      • On the Cart Screen, it should search the cart
    • And of course, we want to add some Toast notifications (pop-ups) to indicate to the user what is going on

Changing Screens Toolbox

The following is a list of necessary JavaScript knowledge to add to our mental toolbox in order to build the Change Screens transitions and functionality:

  • JavaScript
  • CodePen
    • Additionally useful is being able to Add External CodePens into your next working model with CSS or JS code pre-built. This can help you to separate out different features and keep you CodePen code a little simpler.
    • For example, after building the Shopping List Screen in the previous section, I load its CSS and JS into every other CodePen I create (all the other Screens) to carry over its styles and functions.

Let’s build the Change Screens functionality!

Checkout the finished product in the CodePen below. Investigate the JS code in the editor to learn how it all works.

Completed Change Screens transitions.

3. Store

This is Screen #2 that we will build, the Store. You can see from the screenshot that this screen adds our collection of data (stored in a JavaScript array), a few interactive buttons on the store itself and on each item, and changes the input field to search for items in the store. Let’s run over our considerations for the Store Screen once again:

  • Considerations
    • Collection of data – say at least 20 different items (stored in a JS array)
    • Buttons to change the View Type (from list to grid and vice versa – the grid icon at the upper-right corner of the store is what we’ll use)
    • Filters: Relevance – Lowest Price – Highest Price
    • Search bar: although not instantaneous search, when ENTER is pressed, it returns (and displays) an array of the relevant items as well as a notification for the results it found (and an “x” button to clear the search) – see below
    • When “Add to Cart” is pressed, we need to clone the DOM node and add it to the array of items that are present in our Cart screen (so that when we click over there it will already be in the Cart)

Store Screen Toolbox

The following is a list of necessary JavaScript knowledge to add to our mental toolbox in order to build the Store screen:

Let’s build the Store Screen!

Checkout the finished product in the CodePen below. Investigate the JS code in the editor to learn how it all works.

Completed Store Screen.

4. Cart + Checkout

The third and final Screen we need to code for our app is the Cart Screen which will include a Checkout modal. Each item that we “Added to Cart” in the Store screen appears in our list here (as cloned DOM nodes).

Beneath the Cart list (not pictured) is a “Checkout (3)” button – with the quantity of items to purchase, and a “Total: $” field, both of which are dynamically updated as we add (or remove) items in the Cart.

Above the Cart list, is the Checkout modal progression: REVIEW – PAYMENT – COMPLETE. When we click the “Checkout (3)” button, this should take us through the full payment process to a “shipped out” animation at the end.

  • Considerations
    • Cloned child nodes are absolutely necessary to make the app function seamlessly between Store and Cart screens. This is because we are not actually loading different screens and passing data between them, but instead we continuously remain on the SAME page, and just push a different area into our iPhone screen based on the section of the app we want to load. Therefore, when we “Add to Cart” we actually need to create an identical copy of the DOM node that contains the item and add it to the Cart section.
    • Dynamic updates (in price or quantity) are controlled and managed with JavaScript’s MutationObserver that detects changes in the DOM and can respond accordingly, as well as custom HTML data attributes to retrieve the relevant information we need.
    • The Checkout Modal is a straightforward implementation that requires no special implementation methods.

Cart Screen Toolbox

The following is a list of necessary JavaScript knowledge to add to our mental toolbox in order to build the Cart screen:

  • JavaScript
    • Useful functions
      • .cloneNode() – to copy the DOM node containing our desired item
      • .appendChild() – to add the cloned node to the Cart
      • MutationObserver – to listen for changes in the DOM
        • This JavaScript feature in particular was the most important thing that I discovered while building the app. There is no other way to listen for changes in the DOM and respond to them without reloading the page.
      • parseFloat() – to deal with updating our prices
      • .toFixed(2) – also for updating prices (limit the decimal to 2 places)
      • .forEach() – to perform the same action on all DOM nodes in an array
  • HTML data attributes – we are using data-item-price

Let’s build the Cart Screen!

Checkout the finished product in the CodePen below. Investigate the JS code in the editor to learn how it all works.

Completed Shopping List Screen.

Just Keep Learning

I hope you found this tutorial session informative and interesting! And I encourage you to always “Just Keep Learning” and experimenting, building new projects, and trying things out. Below is a list of helpful resources you might find useful in your journey.

Resources

View the FULL CodePen Collection (including Start and End points for every screen) here: