Landing : Athabascau University

Group members: this is the place for your learning diary. Use this to post your zipped-up site at least once each unit, and your reflections as often as you wish (at least once per unit). Please write your reflections directly in the post, not as attached files. Where you do need to attach documents, such as for unit 1 designs, use PDF, PNG or JPG formats. You can attach files using the 'Embed content' link in the editor.

QUICK COURSE LINKS:  Add blog post - Read latest group postsFAQs: Course process : Site design : HTML : CSS : JavaScript : JQuery : AJAX : MiscPodcasts for each unit

Updated resource pages:  Unit 1 - Unit 2  - Unit 3Units 4 & 5 - Unit 6 - Unit 7

Unit 5: Javascript Program Designs

  • Public
By Mipam Lauder in the group COMP 266 February 18, 2021 - 12:44pm

Program 1: MapPopup

This javascript class will show a pop-up of the marina’s current location when the user hovers over the marina link.
The MapPopup class will use the leafletjs library.
This program will also be used to satisfy Unit 6: Using Libraries.


function MapPopup(popUpDiv){
const popUpDiv = document.createElement('div', id = popUpDiv) – create div to hold map
let olddata-lat – holds data-lat to compare if link is old or new

MapPopup.prototype.start = function(){
let atags = load all <a> tags containing data-lat

for(a in atags){
add MapPopup.popIn() as mouseover event listener to a tag
add MapPopup.popOut() as mouseover event listener to a tag

MapPopup.prototype.popIn = function(event){
load data-lat, data-lon from tag
load innerHTML as marina name
set popUpDiv position to mouse position

if(data-lat != olddata-lat){ - only update map if link changes
olddata-lat = data-lat
set leaflet map to lat,lon
show pop-up in map
display popUp div

MapPopup.prototype.popOut = function(event){
hide popUpDiv


Program 2: LoadWeather

This javascript class loads the weather from the Environment Canada web service at:
The data is formatted based on the locations selected by the user, with the locations saved in a cookie.
The formatted data is displayed on the weather page of the website.
This program will also be used to satisfy Unit 7: Using external data sources


function LoadWeather(wxdiv){
const wxDiv - keep div used to hold wx
const islandAreas = new Map(['westlisland',true]...) - map to hold user selected island areas
const forecastAreas = new Map(['westisland',['area1',...]],...) - map that references forecast areas based on island areas selected
let combinedAreas - array that holds the forecast areas from forecastAreas based on the selected islandAreas

LoadWeather.prototype.loadCookie = function(){ - run on page load
load cookie data
set islandAreas based on cookie data
update toggle buttons on web page for islandAreas


LoadWeather.prototype.saveCookie = function(){ - attached to checkmark buttons on web page
save cookie data from checkmark buttons
set islandAreas based on checkmark buttons


LoadWeather.prototype._fetchWeather = function(){
XMLHTTPRequest weatherrequest

if(weatherrequest success)
wxDiv.innerHTML = "Unable to fetch weather"

LoadWeather.prototype._parseWeather = function(wxtext){
fill combinedAreas from forecastAreas in islandAreas

split wxtext up into array using "End" line as deliminator - forecast query can return multiple times
keep last non-empty array location as most recent weather
split up recent weather entry into new tempweather array using empty line as deliminator

first and second tempweather array entry is header

let weatherarray = []

for(var i = 2;i < weatherentry.length;i++){
for( area in combinedAreas){
if(tempweather[i] line starts with area)

fill wxDiv with weatherarray
set line style to 'warning' if line contains 'warning' - sets red colour on line
put <br> between weatherarray items

Program 3: QuizGame

This javascript class creates a multichoice quiz on the page, keeping track of the users score, and the time taken to finish the quiz.

function QuizGame(quizdiv){
let quizdiv = quizdiv - keep reference to div used to hold quiz on page
let quiz = [['quiz text','image url','ans1',...,correct_answer],...]
let score, time

QuizGame.prototype.startQuiz = function(){
clear quizdiv

for(q in quiz){
create question div and fill with quizz data
append div to quizdiv
append finish button
show quiz div

QuizGame.protoype.finishQuiz = function(){
clear quizdiv
check selected radio button for each question to see if correct
update score
append time taken, score, and message to quizdiv
append startquiz button


These comments are moderated. Your comment will not be visible unless accepted by the content owner.

Only simple HTML formatting is allowed and any hyperlinks will be stripped away. If you need to include a URL then please simply type it so that users can copy and paste it if needed.