top of page

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:

  1. Heading: I changed the title to "Chrissy Cruz Sample Leadership Quiz” and I added directions below the heading “Answer the following multiple-choice questions”

  2. 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. 

  3. 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>

  4. Font Size: I changed the heading’s font size to a larger size.

  5. 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.

  6. Renamed Start Over: I renamed the start over section to try again return false">Try Again</a> </small><input

  7. 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

  1. 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.

  2. 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.

  3. Feedback Structure Modification: I changed the specific var compliments to different compliments.

Web Hosting: Adding HTML and Javascript to Web Server

  1. I created a Wix website and embedded a widget into the home page

  2. I copied the HTML and JavaScript codes into the widget 

  3. I adjusted the size of the widget to fill the home page

  4. I added a title for the website page with my name, course number, and course title


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.

bottom of page