CODEWITHSUNDEEP
htmlcssformatting
Pyfagorass
Pyfagorass

Reputation: 3

Formatting an Exam in CSS/HTML

I would like to format an exam text online. Having searched high and low, this is the only solution I can come up with: 

<table>
<tr><td colspan="3">Question 1</td><td>[24]</td></tr>
<tr><td>1.1</td><td colspan="2">Solve for $x$</td></tr>
<tr><td></td><td>1.1.1</td><td>$(3x+7)(x^2+2)=0$</td><td>(3)</td></tr>
<tr><td></td><td>1.1.2</td><td>$\sqrt{2-x} - x = 4$</td><td>(5)</td></tr>
<tr><td>1.2</td><td colspan="2">The equations of two parabolas are $y = x^2 + 
    x + c$ and $y = 1 - cx - x^2$, where $c$ is a real number.</td></tr>
<tr><td></td><td>1.2.1</td><td>Prove that these parabolas must intersect 
    for all real values of $c$.</td><td>(6)</td></tr>
</table>

Trying to get each question piece to line up. I've looked at using HTML lists, but they become problematic when inserting graphs and the like. Is there something I'm missing? Is there a quicker way to do type this out? My question rests just on formatting, having figured out counters in CSS whilst looking for an answer.

Many thanks, from a desperate teacher and noobie.

Upvotes: 0

Views: 105

Answers (1)

saamorim
saamorim

Reputation: 3905

If your question is to vertical align, on the top, the number the question and the score, than the most straightforward answer is add a the css style vertical-align:top;.

So your css should be something like:

td {
    vertical-align:top;
}

See this http://jsfiddle.net/dyPR9/

For a more advanced version of this, you shouldn't use tables to format your output. In this case you have an order list and thus, the table is transformed to ol and li elements and the score is put in a div element:

<ol>
    <li class="mainquestion">Question 1
        <div class="score">[24]</div>
    </li>
    <ol>
        <li>Solve for $x$</li>
        <ol>
            <li>$(3x+7)(x^2+2)=0$
                <div class="score">(3)</div>
            </li>
            <li>$\sqrt{2-x} - x = 4$
                <div class="score">(5)</div>
            </li>
        </ol>
    </ol>
</ol>

and the css should handle the presentation:

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".")" "; counter-increment: item }
ol:first-child { padding: 0; }
li.mainquestion { list-style: none; }
li.mainquestion+ol { padding: 0; }
li.mainquestion:before { content: ""; counter-increment: item }
div.score { float: right; }

See the example in http://jsfiddle.net/q2YCV/

Upvotes: 1

Related Questions