Site Files

here

What I did:

Because I already knew what I wanted to do for this part of the course from the get-go I started by submitting my three ideas. After getting approval from the tutor I began doing research about JS and how I could go about making the quiz system and created these designs. Then I started working on making the side navigation responsive, I wanted it to act as the edge screens on Samsung devices. Instead of it being a pull out it is just a button on the left side of the screen that will open the side nav when clicked. After all this, I coded the solution up to a working point and then did some work to improve the functionality of it all as did testing on multiple browsers and mobile devices. Also to get myself familiar with how a quiz system could work I watched some tutorials on how they can be made. The two that I used are Web Dev Simplified - Build A Quiz App With JavaScript and Awais Mirza - Develop a Quiz App with Javascript - Object Oriented Programming my original design for the question layout was the same as the ones that they used but I decided that I wanted to use radio buttons instead of actual buttons for mine. Both of these sources of learning were helpful because they are also in JavaScript, Awias Mirza's implementation matched what I wanted so well that in the actual planning and design phase of my quiz system I could not think of any interface to use other than that of Awias's. So helpful advice for anyone in this unit don't watch tutorials that are closely related to your project. your browser may be blocking the links to the videos, view the author's names and video titles below. The URL is still displayed if the browser blocks the link.

Awais Mirza - Develop a Quiz App with Javascript - Object Oriented Programming

Web Dev Simplified - Build A Quiz App With JavaScript

What Went Well and Didn't Go Well:

Initially, when designing the quiz code I had the issue of not being able to transfer all the question data over to another page easily, to fix this I just made everything for the quiz work on a single page that way there was no data to be passed between pages. When making both the tree view and the side nave work I coded it in a new separate project just to work everything out but then trying to get it all to work in the website for this course I had some difficulties because of the way the layout works

What I Would Do Differently:

I would like for there to be a backend so that the users could keep track of what quizzes they have already done and what score they got on it. It would also help with the organization to be using a Database. I would also not watch any tutorials about what I am trying to make so that I can design it all without having other people's implementation lingering in my mind.

The Most Valuable Thing I learned:

One: I don't like JS, Two: how to use and write code in JS. Some good ways to Debug other that console logs i.e. line breaks

Learning OutComes:

Write well-structured, easy maintained JavaScript code following accepted good practice

• All the names that I use for variables, functions, and classes are descriptive and related to what the method does, variables are for, or the class is purpose.
• there are comments throughout the program informing others what is happening.
• I have followed the naming conventions for the language i.e. camel casing. There is the spacing between all the operators used
• because I have followed the conventions and good practices the code I have written is easy to maintain

make effective and efficient use of a full range of programming constructs including sequence, selection, and iteration

• Iteration is used many times to populate HTML elements with content. For example in app.js -> results() I use a for loop to display all the questions that the user got wrong in that quiz.
• I use arrays of Question objects to make the quizzes in app.js.
• For both QuizVontroller and Question, I have made a constructor

effectively use variables, including passed parameters, local and global variables, and arrays, to improve the efficiency, re-use, and maintainability of the code
.

• In SideNav.js I use global variables because all the functions need access to these elements, this makes sure I only have to get them once
• For Question.js there is a constructor that take three params to create a Question object
• In the QuizController.js class, the functions have return values and the ones in SideNav.js do not have any return values.
• In app.js I make use of Question objects, arrays, and other variables.
• app.js -> getQuizCount() I make use of an array and for loop to print the number of quizzes there are for each section.
• app.js -> populateQuiz() I make use of an if...else statement that will determine if there is another question for the quiz of if there are no more questions them show the user their score
• app.js -> clearRadioButtons(id) I make use of parameters because this method now allows me to clear all the radio buttons or clear all but a specified radio button
• I make use of local variables in app.js when I need multiple elements with the same class, this is shown in the getQuizCount() method. Because the array is local to the function memory is not being used pointlessly

use a wide range of programming features and commands to improve the efficiency, re-use, and maintainability of the code

• I am making use of the onclick event for the language
• I use document.getElementById(), document.getElementClassName(), window.alert(), the push method for arrays, and the Date object

write JavaScript code that works in all major browsers (including IE, Mozilla-based browsers such as Firefox, opera, Konquerorm safari, chrome)
Don't know how I can prove this but I tested the quiz stuff in Firefox, Chrome, and Safari accounting for 85.22% of all people browsing the internet

effectively debug JavaScript code, making use of good practice and debugging tools

• When I ran into issues with the code I used the Debugger that comes with Firefox. For this, I had to learn how to use line breaks, which is something that I have always ignored doing when programming in other languages with IDE's or other text editors.

Indicative Grading Criteria Self Grade

• c, because the code works well and as intended, there are no apparent buts, logic or run-time errors, there are comments that tell you what something does not how it does it, it all works well with the CSS and HTML and I have used a variety of code constructs there is also a well-designed interface. but as much of the code interface was heavily inspired by others (linked above in 'WHAT I DID') or the interface was directly from them the work meeting the criteria is not solely reflective of my abilities.

Linking to Personas & Scenarios

• As a teacher Key will be happy that there are small quizzes for her daughter to take.
• As James likes to have some way to definitively tell if he has learned what he needs the quizzes will be very valuable to him.
• Because most people use their phone for web browsing having both the top-nav and side-nav be responsive will make for a better overall experience for all personas.
• All users that are serious about the learning will also value the quizzes