Project Synopsis:
A useful method of learning the basics of web programming is reviewing, deconstructing, and modifying code when learning JavaScript and PHP. For this project, I customized the code in this HTML and Javascript quiz with my own questions, responses, as well as the look-and-feel (e.g., font size and color, page heading).
​
Description of changes I made to HTML Code:
​
-
Heading: I changed the title to "Chrissy Cruz Sample Leadership Quiz” and I added directions below the heading “Answer the following multiple-choice questions”
-
Color: Using the html color picker on google, I selected a light pink background color using the code “#fbd4fc". I then added that code to the HTML code.
-
Font: I change the heading’s font to Calibri using <caption><strong><font face="Calibri" size="5">Chrissy Cruz Sample Leadership Quiz</font></strong></caption><br><br>
-
Font Size: I changed the heading’s font size to a larger size.
-
Footer: I added the hr tag to add the horizontal line towards the credit area at the bottom of the quiz where it states- This free quiz script provided by JavaScript Kit.
-
Renamed Start Over: I renamed the start over section to try again return false">Try Again</a> </small><input
-
Renamed Select Correct Answer: I renamed the section to select correct answer <center><p><strong>Select correct answer:</strong> <select
​
Description of changes I made to JavaScript Code
​
-
Question Structure Modification: I changed the var total from 5 questions to 10 questions. I removed the 5 provided questions and changed all 10 stem questions of the 10 multiple-choice questions. I turned all 10 questions into leadership studies questions.
-
Answer Structure Modification: I added four accompanying possible answers to each leadership quiz question. I changed all the choice values to match the accompanying question. I updated the solutions with the correct answers.
-
Feedback Structure Modification: I changed the specific var compliments to different compliments.
​​
Web Hosting: Adding HTML and Javascript to Web Server
​
-
I created a Wix website and embedded a widget into the home page
-
I copied the HTML and JavaScript codes into the widget
-
I adjusted the size of the widget to fill the home page
-
I added a title for the website page with my name, course number, and course title
​​
Reflection:
​
I really enjoyed building this HTML and JavaScript quiz! I found it to be helpful in the sense that now I understand the immense detail that goes into building a website using HTML and JavaScript, as opposed to utilizing templates that allow for more simplistic customizations. I believe this will be very useful in my career as an instructional specialist, as I may need to understand and utilize HTML and JavaScript at some point to update our faculty website and create new content across a multitude of projects. I selected leadership studies questions because this is what I teach at UCF and I am very passionate about this subject matter.