Below are examples of HTML and Javascript work from Module 2: Project2 and Module 3: Project 3: from weeks 2 and 3, respectively.
Both are quizes. Module2:Project2 HTML and Javascript Quiz randomized a list of questions and answers and the user is
asked to make a choice. The content was based on a UF 101 class that covered the history of UF and Gainesville.
The second project, Module3:Project 3, used HTML and Javascript to create a drag-and-drop quiz. The content
was based on technology grouping names. Click below the image to view more details for each example.

Quiz


This was set up as a quiz using Javascript.



(I also created one with a different background, Quiz2)

HTML and Javascript Quiz: Gainesville & UF



I decided to provide 2 links because I couldn't decide which background to use. I took both photos this past Wednesday when I went to go "see" my kids. :).

The web hosting service I used is by IONOS (formerly 1&1) which I've had for a number of years.

I modified both background pictures in GIMP. I took the photos in the middle of the afternoon, so the pictures were very bright. My goal was to lighten the background. I did this by increasing the lightness and decrease the saturation. So, I played with the sizing/scale in GIMP trying different resolutions out. The stadium one (/quiz) was set to 1440x1080 and the one with my kids (/quiz2) is 1024x768. I used W3Schools to reference the HTML tags/code needed. Placing the background was a challenge as it would repeat and would not center, so I made sure to use the "no-repeat" and "center" position HTML elements. Additionally, I tested different colors and felt that the light gray (#D3D3D3) background worked best with the pictures I used.

I used the Arial, Helvetica font for the name of the quiz (within the <style> tag) and a <H1> header tag at the very top. I placed a horizontal rule ( <hr> ) tag toward just before the end of the html (</html>) tag, however, this was crossing in the middle of the image depending on how the web browser was size. I used a dozen break ("<br>") tags to move the horizontal line down.

As for the quiz, I used my notes from a recent class I took (UF 101) that was required for the THRIVE@UF certification. The class covered important history of UF and Gainesville.

In terms of challenges, I found that it was important to go slow and methodical. Sometimes, when I get familiar I start to speed up. Using a combination of copy & paste as well as manually typing, I made some mistakes which caused "undefined" errors. I did some basic testing/QA on the quiz before submitting this in the post.

In terms of the two quizzes, the only difference was the image that I uploaded. Both the HTML and Javascript files are the same. Even the background.jpg file name is the same, but the actual contents of the file are different (i.e. I renamed both files to background.jpg).



Drag and Drop Quiz


This was set up as drag-and-drop quiz using Javascript

Drag-N-Drop Assessment: Technology Groups



This was a fun, little project to work on. I was trying to figure what content I should use for the drag-and-drop assessment. Initially, I had done food groups (Links to an external site.)(for my children) and was about to submit it and then saw another student's post. (She beat me too it but did an excellent job.) I went back and forth on content but eventually settled on different technology groups. I take for granted that the various technologies I'm either exposed to or interested in and realize that many are unfamiliar with them.

I was able to add a number of changes:

Font type was update/set to Arial. Font size was set to 17px for the individual titles of the 4 smaller boxes. Font size for the list was set to 15px. Set the main background as beige

- For the headings under main boxes, I changed the background to olive color (#808000) and center aligned the text. Also changed it for the very left column that listed the items to be dragged.

- The width and height of the main container (dragDropContainer) containing the 4 smaller boxes was reduced to 925 (w) x 325 (h) pixels.

- I also downloaded a background image that looked high tech from ShutterStock (shutterstock_1492332182.eps) and manipulated the image in GIMP- scaled it down, resize, and exported it as a jpeg.

- Vertical height of the left box containing the options was reduced down to 285 pixels

- I incorporated a number of meta tags (title="NAME") so when a mouse is placed over, it pops up either the name or expands it out- (Hint: This may help answer the quiz :). This may help with usability as well.

- Had an interesting issue with the <div> elements but managed to figure it out.

FYI, I've not been able to use Kompozer, but I am able to figure some things out. I'm currently trying out Atom.