Go to content

In an effort to expand my own front-end knowledge of the web, I’ve decided to study up on JavaScript. The good people (person?) over at javascriptissexy.com created a wonderful little guide on how to learn JavaScript properly and I had used my freetime to go through the lessons and required reading material.

Unfortunately, what was suppose to take approximately 4 weeks ended up taking about 2 months, and by the time I was suppose to code my first dynamic quiz, I had written 5 lines of HTML and my mind went blank. I had no clue on how to proceed with a project like this without some sort of outline, example, or help.

Fortunately there are people out there who do know how to go about this without assistance and have posted there work online for users like me to look at and marvel. Gary Carino is one such user, and I had taken his dynamic quiz apart to learn and study from. The following deconstruction is based on my alterations to his project.


THE HTML

<div id="container">
    <h1>Dynamic Quiz Project</h1>
    <div id="quiz"></div>
    <a href="#">
        <div id="next" class="button">Next</div>
    </a>
    <a href="#">
        <div id="prev" class="button">Prev</div>
    </a>
    <a href="#">
        <div id="start" class="button">Start Over</div>
    </a>
</div>

The div with the ID ‘container’ is doing just that, it’s containing the entire dynamic quiz within itself and is mainly for styling and positioning purposes, with the H1 tag housing your title. The div with the ID ‘quiz’ is where most of the magic will be happening. It is left empty because all the coding will be appended with JavaScript (without the appending code, the area will be left blank). What’s left are three button styled links to move the quiz forward, backwards, or back to the beginning. They too will be controlled and modified a bit via the JavaScript code.


THE CSS

html, body {
    background-color: #CDCDCD;
    font-family: Georgia, "Times New Roman", Times, serif;
    margin: 0;
    padding: 0; 
}

Simple universal style settings, colouring the background, zeroing any padding and margins, and setting the font of the page.


#container {
    width: 400px;
    margin: 20px auto;
    padding: 0 25px 50px 25px;
    background-color: #FD9331;
    border: 3px solid #A95211;
    border-radius: 3px;
    color: #FEFEFE;
    font-weight: bold;
    box-shadow: 5px 5px 10px #643; 
}

Sizing, positioning, and general customization for the quiz container.


h1 {
    text-align: center;
    text-decoration: underline; 
}

Centering and decorating the title of the quiz


#quiz {
    display: none;
    font-family: Arial, Helvetica, sans-serif; 
}

By setting the display for the quiz ID to none, it is hiding the quiz from the user (Don’t worry, JavaScript will have the quiz fade in to view). The quiz is also given it’s own font.


.button {
    border: 2px solid #A95211;
    border-radius: 3px;
    padding: 3px 5px;
    float: right;
    background-color: #DCDCDC;
    margin-left: 4px;
    display: none;
    color: #765303;
    text-decoration: none;
    box-shadow: 1px 1px 2px #643; 
}

.button:hover {
    background-color: #F8F8FF;
    color: #525252; 
}

Styling, page positioning, colouring, customizing of the quiz buttons, and effects for when the mouse hovers over the button. Also initially hidden from the user (it’ll get faded in too).


ul {
    list-style-type: none;
    padding: 0;
    margin: 0; 
}

Zeroing the padding and margin for what will be the choices the quiz gives, but more importantly removing the default bullets from the list.


Deconstructing a dynamic quiz part II will break down what is happening on the JavaScript side.

Leave a Reply

Your email address will not be published. Required fields are marked *