mdinfotech.net  



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. for loop
  6. Dates, Date Get Methods
  7. Arrays
  8. Random Numbers
  9. Operators
  10. Objects

Assignment 2: 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 assessment.


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:
      var timeleft = 10;
      var 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".

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. 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.
  7. 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.
  8. Save the service worker in the root of the scope you used in the manifest (likely the same folder as your index.html)
  9. 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');
    }                    
                        
  10. Create an account on Github. Create a new repository and put your Quiz Assignment in your new Github repository.
  11. 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
  12. 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
  13. 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. 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)
    /*
    Copyright 2018 Google Inc.
    
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at
    
        http://www.apache.org/licenses/LICENSE-2.0
    
    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
    */
    const express = require('express');
    const app = express();
    const redirectToHTTPS = require('express-http-to-https').redirectToHTTPS;
    
    // Redirect HTTP to HTTPS,
    app.use(redirectToHTTPS(, <>, 301));
    
    // This serves static files from the specified directory
    app.use(express.static(__dirname));
    
    const server = app.listen(8081, () => {
      
      const host = server.address().address;
      const port = server.address().port;
    
      console.log('App listening at http://%s:%s', host, port);
    });
    
    package.js - tells glitch what server side js packages that are needed
    {
      "//1": "describes your app and its dependencies",
      "//2": "https://docs.npmjs.com/files/package.json",
      "//3": "updating this file will download and update your packages",
      "name": "hello-express",
      "version": "0.0.1",
      "description": "A simple Node app built on Express, instantly up and running.",
      "main": "server.js",
      "scripts": {
        "start": "node server.js"
      },
      "dependencies": {
        "express": "^4.17.1",
        "express-http-to-https": "^1.1.4",
        "node-fetch": "^2.6.1"
      },
      "engines": {
        "node": "12.x"
      },
      "repository": {
        "url": "https://glitch.com/edit/#!/lwear-pwatest4"   /* you need to update this */
      },
      "license": "MIT",
      "keywords": <
        "node",
        "glitch",
        "express"
      >
    }
    
  14. Install your progressive web app on a mobile device and test it out!
Additional Resources
  • 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: Adaptive icon support in PWAs with maskable icons
  • 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. 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)
      /*
      Copyright 2018 Google Inc.
      
      Licensed under the Apache License, Version 2.0 (the "License");
      you may not use this file except in compliance with the License.
      You may obtain a copy of the License at
      
          http://www.apache.org/licenses/LICENSE-2.0
      
      Unless required by applicable law or agreed to in writing, software
      distributed under the License is distributed on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
      See the License for the specific language governing permissions and
      limitations under the License.
      */
      const express = require('express');
      const app = express();
      const redirectToHTTPS = require('express-http-to-https').redirectToHTTPS;
      
      // Redirect HTTP to HTTPS,
      app.use(redirectToHTTPS(, <>, 301));
      
      // This serves static files from the specified directory
      app.use(express.static(__dirname));
      
      const server = app.listen(8081, () => {
        
        const host = server.address().address;
        const port = server.address().port;
      
        console.log('App listening at http://%s:%s', host, port);
      });
      
      package.js - tells glitch what server side js packages that are needed
      {
        "//1": "describes your app and its dependencies",
        "//2": "https://docs.npmjs.com/files/package.json",
        "//3": "updating this file will download and update your packages",
        "name": "hello-express",
        "version": "0.0.1",
        "description": "A simple Node app built on Express, instantly up and running.",
        "main": "server.js",
        "scripts": {
          "start": "node server.js"
        },
        "dependencies": {
          "express": "^4.17.1",
          "express-http-to-https": "^1.1.4",
          "node-fetch": "^2.6.1"
        },
        "engines": {
          "node": "12.x"
        },
        "repository": {
          "url": "https://glitch.com/edit/#!/lwear-pwatest4"   /* you need to update this */
        },
        "license": "MIT",
        "keywords": <
          "node",
          "glitch",
          "express"
        >
      }
      
    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