Integrated Multimedia Design

After viewing several tutorials, I found making the edits to the existing script rather straightforward. I copied the HTML text into Komposer  and changed the title of the text code to Biology Quiz-Cellular Reproduction. I had difficulty following the directions in the tutorial explaining how to adjust the spacing above the start over line using the <b> break tags, but then I realized I had edited the wrong piece of code. After I fixed that, I used the Komposer editor in preview mode to create the space instead of the <b> and <hr> HTML code and found it was much easier. I discovered the same thing when adjusting the background color, and noticed that the code was different when using the Komposer editor versus coding in straight HTML source code. I surmise this is because Komposer imbeds the format coded into the HTML file. I used Komposer to reformat the background color to a light aqua, change the font to Calibri, and the font color to blue.

I edited the JavaScript file using Notepad, changing the existing questions and responses to modify the  pop-quiz with my content, and found editing the code to be fairly straightforward. I also modified a couple of responses for correct answers to, "You got it!" and "Nice Job!". Initially, I had difficulty uploading the files to my site using FileZilla, but once I increased the timeout parameter, it worked like a charm.

For someone who has had no previous experience with HTML, CSS, and JavaScript, I found this exercise to be extremely challenging. In a nutshell, what I learned is that HTML is what it is, CSS is what it looks like, and JavaScript is what it does. Overall, I feel quite accomplished after completing this project and more confident in my ability to modify code.

I modified a drag-n-drop quiz to adapt it to a mythology quiz. The list box contains the names of the gods and goddesses of four different mythology groups; Greek, Egyptian, Roman, and Norse. The objective is to match the names of the deities by dragging the name from the list box and dropping it into the corresponding mythology group. If the answer is correct, the name will appear in green; if the answer is incorrect, it will show as red. If the name is dragged into an inappropriate mythology box, it can be repositioned until the correct mythology box is found.

Some of the changes I made to the HTML file include changing the text in the main title and corresponding instructions to reflect the names of the deities, along with the box headings identifying the mythology groups. I added a 4th group box to match the other three boxes. I spent a majority of my time modifying the CSS code, adjusting the colors and box sizes, fonts, text, and background colors. First, I widened the list box to accommodate the box title, Gods/Goddesses. Then I adjusted the list box with equal margins on either side and shortened the bottom end of the box to a more appropriate length.

I changed the main title color and font and bolded the three items at the end of the instructions line. Then, I formatted the size of the background frame to accommodate all four group boxes horizontally. I played around with the various colors for the list and group box titles, background color, inner frame color and the list box color until I got a lively mix of contrasting colors.