In module 2 and 3, we have learned how to do web design. We learn the basics of web programming by learning how to modify HTML and CSS code. For project 2, I create a 10 question Javascript quiz about "Fun Facts About Animals" by modifying HTML and CSS code! In project 2, I learn the basic skill of changing background color, title, font size, adding <“br”> or <“h1”> in HTML. Then, I create the questions and answer in a JavaScript file. For project 3, I create a drag and drop quiz about “Fun Holiday Activities to Do.” I learn how to keep shuffle items ="true" and how to change the locked-after-drag “=false” into “=true”. In the CSS file in project 3, I learn more about how to add a column, revise headers, and the width and height of the drag-drop container.


Project 2: HTML and Javascript Quiz-Fun Facts About Animals

Steps in HTML file:
  • Changed the background color of the quiz by using #c0eb34 tag
  • Changed the quiz title to "Fun Facts About Animals"
  • Made the title's font size larger by adding <"h1"> tag before the title
  • Added <”br”> among the solution, your response, and the star over

    • Steps in JavaScript file:
  • Changed the number of questions in “var” from 5 to 10
  • Changed the options for the 7 compliments which show a correct answer
  • Changed the 5 original questions and added 5 more with choice options
  • Removed the original answers from “solution”
  • Created solutions for the 10 questions

    • This is the link to my javascript quiz on Fun Facts About Animals.


    Project 3: Drag-n-drop Assessment-Fun Holiday Activities to Do

    Steps in HTML file:

  • Changed the title into Fun Holiday Activities to Do
  • Changed the introductory sentence
  • Kept shuffle items ="true"
  • Changed the locked-after-drag “=false” into “=true”
  • Added a fourth box
  • Changed the list-of-item and main-container
  • Changed congratulatory prompt

    • Steps in CSS file:
  • Changed the font family into Verdana
  • Adjusted the background color to #edf0ad
  • Changed the color of column headers (#f7a43e,#f06626)
  • Changed the width and height of the drag-drop container (W:1000;H:350)
  • Changed the width of the main container into 790
  • Adjusted the width and height for each of list of items

    • This is the link to my Drag and Drop quiz on Fun Holiday Activities to Do.