mdinfotech.net  



Use the Ms. Wear's JavaScript Notes for Web Dev 11 as a summary of the code you need to know.

If you are learning on your own, watch and program along with this: JS in 7 minutes - good summary of the first lesson I teach, includes if statements.

Now, create a new HTML file, with a new CSS file, and a new Javascript file. Use the w3Schools tutorials to learn basic JavaScript.
  1. w3 JavaScript Tutorials
  2. JS Events, DOM Event Reference
  3. Variables
  4. if..else
  5. Loops for Beginners: while loop
  6. Loops for Experienced Programmers: for loop
  7. Dates, Date Get Methods
  8. Arrays
  9. Random Numbers
  10. Operators
  11. Objects

Assignment 3: JS Quiz Assignment

Using the QuizTemplate.html file provided by Ms. Wear, build a JavaScript Quiz that asks at least 10 questions, and give a final score at the end with feedback. Add additional features to improve the app and declare them when you submit it on Google Classroom. Hand in to Wear_IT > Hand-in > Web Dev 11 > Quiz Assignment. Include a text file called that lists all of your added features.


Marking Criteria (/37)

  • Iterates through 10+ questions /10
  • Appropriate good quality images used for each question. /5
  • Makes an assessment based on final score or selected answers /5
  • Executes through entire quiz with NO Javascript errors on the console /5
  • CSS Validates /2
  • HTML Validates /2
  • Responsive: works on wide screen and phone emulator /2
  • Byte Size of Entire Folder < 3 MB /2
  • Additional Features /4
    Each feature worth 2 marks, up to 6 marks total (2 bonus)
  • Bugs & Usability Issues -1 for each usability issue or bug found
Resources
Countdown Timer:
  let timeleft = 10;
  let downloadTimer = setInterval(function(){
  document.getElementById("countdown").innerHTML = timeleft + " seconds remaining";
  timeleft -= 1;
  if(timeleft <= 0){
    clearInterval(downloadTimer);
    document.getElementById("countdown").innerHTML = "Finished";
  }
}, 1000);
will work in a div tag with id "countdown".
In class demonstration where students will add the JS Quiz Assignment and host it on Glitch. You will need to create an account at Glitch. This is where we will be hosting all Progressive Web Apps for this course.

You will need accounts on both Glitch and Github. Covered in class: How to use Github to get your images on Glitch.

Progressive Web Apps. Progressive Web Apps (PWAs) are web applications that load like regular web pages or websites but can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native mobile applications.

  1. Watch: When Should You Use PWA's?
  2. Google Intro To Progressive Web Apps
  3. Glitch - a free online tool for online app development
How to make your Quiz Assignment a PWA
  1. Rename the main html file index.html if it isn't already.
  2. Find, or make, a 512x512 icon for your app and put this app into an icons folder. Flaticon.com has lots, but be sure to download the 512x512 version.
  3. Read about Maskable Icons. Is your icon maskable? Test it out at Maskable.app to find out. If you need a maskable icon, simply create one by adding transparent padding to one of your existing icons and add it to the manisfest (created in the next step) with the purpose "maskable" as shown in Maskable Icons.
  4. Use the manifest generator to create additional icons for your site and a manifest for your site, download the zip file.
  5. Extract the zip file. Put the icons in the icons folder.
  6. Rename the manifest file manifest.json and put the manifest in the root folder.
  7. Update the locations of the icons in the manifest. For a full explanation of the manifest file: https://pwa-workshop.js.org/1-manifest/.
  8. Add the manifest to your base HTML template by putting the tag link rel="manifest" href="manifest.json" into the head.
  9. Read this tutorial and follow the instructions for adding the service worker: Making a PWA Doesn't Have to be Scary. You will need to change the list of files in cache.addAll to be the files in your site. Keep notfound.txt in the list, and create the file containing a simple message like 'file not found'. (For a more advanced service worker: the service worker.)
  10. Save the service worker in the root of the scope you used in the manifest (likely the same folder as your index.html)
  11. Add a code block to your base js file to load the service worker. It should be something like
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/sw.js');
    }                    
                        
  12. Create an account on Github. Create a new repository and put your Quiz Assignment in your new Github repository.
  13. Create an account on glitch. Import your Github repo (repository) to Glitch. I suggest using Glitch because 1) it offers HTTPS which is required for service workers, and 2) it allows you to hide API keys
  14. Run a Lighthouse audit on your PWA. You will notice it passes a number of tests, but also fails a few. You can also use: An online PWA tester
  15. Read the lighthouse audit and improve where you can. To get HTTP to forward to HTTPS, add a package.json (don't forget to update the names of the files to cache) and server.js. Copy and paste from https://glitch.com/edit/#!/lwear-pwatest4.

    server.js - runs server side js that handles events such as redirecting http to https (required by service workers)


    package.js - tells glitch what server side js packages that are needed
  16. Run the lighthouse audit in Chrome Web Dev Tools.
  17. Install your progressive web app on a mobile device and test it out!
Additional Resources
  • Lighthouse failing? Online PWA checker, Online Performance Checker
  • the service worker
  • https://blog.heroku.com/how-to-make-progressive-web-app
  • To understand the manifest, you need to understand JSON. Please do the above lesson before proceeding.
  • Look at What are Web Manifests?
  • Maskable icons: What are and how to create Maskable Icons
  • Upload, Edit and Create Maskable Icons
  • Free icons: FlatIcon, To add the manifest and icons to your pwa
    1. Rename the main html file index.html if it isn't already.
    2. Find, or make, a 512x512 icon for your app and put this app into an icons folder. Use this one if you like.
    3. Use the manifest generator to create additional images for your site and a manifest for your site, download the zip file.
    4. Extract the zip file. Put the icons in the icons folder and the manifest in the root folder.
    5. Update the locations of the icons in the manifest. For a full explanation of the manifest file: https://pwa-workshop.js.org/1-manifest/.
    6. Add the manifest to your base HTML template by putting the tag link rel="manifest" href="manifest.json" into the head.
  • Watch What is a Service Worker?. For a more detailed explanation watch Introduction to Service Workers.
    1. Create the service worker. Read this tutorial and follow the instructions for adding the service worker: Making a PWA Doesn't Have to be Scary to make one of your webpages into a PWA.
    2. Save the service worker in the root of the scope you used in the manifest (likely the same folder as your index.html)
    3. Add a code block to your base js file to load the service worker. It should be something like
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/sw.js');
      }                    
                          
    1. Create an account on Github. Create a new repository and put your Quiz Assignment in your new Github repository.
    2. Create an account on glitch. Import your Github repo (repository) to Glitch. I suggest using Glitch because 1) it offers HTTPS which is required for service workers, and 2) it allows you to hide API keys
    3. Run a Lighthouse audit on your PWA hosted on Glitch. You will notice it passes a number of tests, but also fails a few. You can also use: An online PWA tester
    4. Read the lighthouse audit and improve where you can. To get HTTP to forward to HTTPS, add a package.js (don't forget to update the names of the files to cache) and server.js. Copy and paste from https://glitch.com/edit/#!/lwear-pwatest4.

      server.js - runs server side js that handles events such as redirecting http to https (required by service workers)
      server.js

      package.js - tells glitch what server side js packages that are needed
      package.js
    5. Install your progressive web app on a mobile device and test it out!
    Convert Your Existing Website into a PWA
    1. Create an app manifest
    2. Add it to your base HTML template
    3. Create the service worker
    4. Serve the service worker on the root of the scope you used in the manifest
    5. Add a script block to your base HTML template to load the service worker
    6. Deploy your progressive web app on a website like glitch, heroku or github.
    7. Use your progressive web app!
    Use this tutorial: Making a PWA Doesn't Have to be Scary to make one of your webpages into a PWA. https://blog.heroku.com/how-to-make-progressive-web-app