My latest project is allowing Members to rate Articles that they just read.
I would like present maybe 5 questions and use a Likert Scale for the response.
Here are some screen-shots that I created in OO Calc…
What is the best way to use HTML/CSS to the get output that looks like the examples above?? :-/
(I am leaning towards using an HTML Table…)
Thanks,
Debbie
P.S. Which format do you like better… Screen-shot #1 or Screen-shot #2??
I like shot #1 , the top one. It seems less redundant.
Also I would consider this to be an HTML table. The data has clear semantic and co-relational meaning, so that dictates what the mark-up should be.
You can style it just about anyway; this is no different than a star rating system. You could cop the stylesheet any such rating sys and just change the CSS the selectors to target the child elements of TDs.
[FONT=verdana]Personally, I would keep it as simple as possible. For that reason, I would suggest you stick with just one question, or two at the most. Anything more than that means more effort on the part of the visitor, and so more chance that they won’t bother to reply.
I would simply ask: Was this article helpful?
Mike
[/FONT]
If you only has 5 questions, imo the 1st one is better choice. It also unclutered and take only small space to your site.
Sent from my GT-I5500 using Tapatalk
The one thing that no one has picked up on is that if I go with Choice #1, then my Radio Buttons don’t have a <LABEL> associated with each one.
I know there are some people around here that would shoot that design down immediately!!!
While I agree that you should almost always use Labels, in such a repetitive and tabular case as this, I don’t think it is an issue, although I’m sure Accessibility people will scream bloody-murder at that comment… 
Like most things, sometimes you have to compromise, but feel free to pipe in…
Debbie
The one thing that no one has picked up on is that if I go with Choice #1, then my Radio Buttons don’t have a <LABEL> associated with each one.
#1 The label could be hidden.
AND
#2 Because of the NATURE OF RADIO BUTTONS ( they are linked in a group by similar name), the label points back to the rlated QUESTION and not to the ‘name’ attribute of each button. In other word think of the label as labeling a button GROUP.
<tr>
<td><label for="q1">Question of the day</label></td>
<td><input type="radio" name="q1"> </td>
<td><input type="radio" name="q1"> </td>
<td><input type="radio" name="q1"> </td>
<td><input type="radio" name="q1"> </td>
<td><input type="radio" name="q1"> </td>
</tr>
hope that helps.
I see what you are saying, but are you sure about that??
According to www.w3.org, the Label applies to the Radio Button and not the group.
Here is the example they provide…
Example Code:
<h1>Donut Selection</h1>
<p>Choose the type of donut(s) you would like then select
the "purchase donuts" button.</p>
<form action="http://example.com/donut" method="post">
<p>
<input type="radio" name="flavor" id="choc" value="chocolate" />
<label for="choc">Chocolate</label><br/>
<input type="radio" name="flavor" id="cream" value="cream"/>
<label for="cream">Cream Filled</label><br/>
<input type="radio" name="flavor" id="honey" value="honey"/>
<label for="honey">Honey Glazed</label><br/>
<input type="submit" value="Purchase Donuts"/>
</p>
</form>
For Screen-shot #1, I could do that, but I’m not sure what you are saying is semantically correct.
Debbie
My best guess is that the HTML Table provides the proper semantic structure of linking each Question in the first column to the corresponding Radio Buttons in the other columns all of which are in the same respective row.
Debbie
OK…
I thought about it from a different angle. My previous though processed focused on NOT REPEATING info. The thing , if we reconsider what the WC# actually MEANS, is that each button must have its own UNIQUE label. Now from a human point of view this is redundant and thus semantically it could be condensed to tabular format. But since we MUST give EACH INPUT TAG a label… this is what we end up with…
<style type="text/css">
th+th, td+td{width:auto;text-align: center}
th {text-align:left; background: #ccc; text-transform:capitalize;width:15em}
td,th {padding:10px;}
tr:nth-child(2n) td{background: #eee}
td label {height: 0; overflow: hidden; display: block}
</style>
<table>
<thead>
<tr>
<th>the Question </th>
<th>most</th>
<th>almost</th>
<th>some</label></th>
<th>barely</th>
<th>none</th>
</tr>
<thead>
<tr>
<td>1) Question</td>
<td><label for="most1">most</label></label><input type="radio" id="most1" name="q1"></td>
<td><label for="almost1">most</label><input type="radio" id="almost1"name="q1"> </td>
<td><label for="some1">most</label><input type="radio" id="some1" name="q1"></td>
<td><label for="barely1">most</label><input type="radio" id="barely1" name="q1"> </td>
<td><label for="none1">most</label><input type="radio" id="none1" name="q1"> </td>
</tr>
<tr>
<td>2) Question</td>
<td><label for="most2">most</label></label><input type="radio" id="most2" name="q2"></td>
<td><label for="almost2">most</label><input type="radio" id="almost2"name="q2"> </td>
<td><label for="some2">most</label><input type="radio" id="some2" name="q2"></td>
<td><label for="barely2">most</label><input type="radio" id="barely2" name="q2"> </td>
<td><label for="none2">most</label><input type="radio" id="none2" name="q2"> </td>
</tr>
<tr>
<td>3) Question</td>
<td><label for="most3">most</label></label><input type="radio" id="most3" name="q3"></td>
<td><label for="almost3">most</label><input type="radio" id="almost3"name="q3"> </td>
<td><label for="some3">most</label><input type="radio" id="some3" name="q3"></td>
<td><label for="barely3">most</label><input type="radio" id="barely3" name="q3"> </td>
<td><label for="none3">most</label><input type="radio" id="none3" name="q3"> </td>
</tr>
</table>
Still redundant, but now even more so.
So, although it has it’s limitations, this is what I would go with instead:
<style type="text/css">
ol {padding-top:2em}
li em, li label, li input {display:inline-block; padding:0 10px 10px 10px; vertical-align: top}
li {position: relative; }
li em{ width:10.5em}
li label{position: absolute;width:4em; bottom: 100% ; margin-left: -2em; font-weight: bold}
li input, li label { width:4em ; text-align: center}
li+ li label {left:-9999em ;}
</style>
<ol>
<li>
<em>Question </em>
<label for="most1">most</label><input type="radio" id="most1" name="q1">
<label for="almost1">almost</label><input type="radio" id="almost1"name="q1">
<label for="some1">some</label><input type="radio" id="some1" name="q1">
<label for="barely1">barely</label><input type="radio" id="barely1" name="q1">
<label for="none1">none</label><input type="radio" id="none1" name="q1">
</li>
<li>
<em> A really much longer Longer Question </em>
<label for="most2">most</label><input type="radio" id="most2" name="q2">
<label for="almost2">almost</label><input type="radio" id="almost2"name="q2">
<label for="some2">some</label><input type="radio" id="some2" name="q2">
<label for="barely2">barely</label><input type="radio" id="barely2" name="q2">
<label for="none2">most</label><input type="radio" id="none2" name="q2">
</li>
<li>
<em>Question </em>
<label for="most3">most</label><input type="radio" id="most3" name="q3">
<label for="almost3">almost</label><input type="radio" id="almost3"name="q3">
<label for="some3">some</label><input type="radio" id="some3" name="q3">
<label for="barely3">barely</label><input type="radio" id="barely3" name="q3">
<label for="none3">none</label><input type="radio" id="none3" name="q3">
</li>
</ol>
Here is what I came up with…
/****************************/
/* RATE THIS ARTICLE Styles */
/****************************/
#rateThisArticle{
width: 800px;
}
#rateThisArticle fieldset{
padding: 30px 48px 50px 48px; /**/
}
#rateThisArticle legend{
margin: 0 0 0 -2.5em; /**/
}
form#rateThisArticle label{
display: inline;
font-weight: bold;
}
#rateThisArticle table{
margin: 0;
border-collapse: collapse;
}
#rateThisArticle th{
padding: 4px 5px 2px 5px;
text-align: center;
border: 1px solid #AAA;
background-color: #DDD;
}
#rateThisArticle td{
padding: 6px 5px 6px 5px;
text-align: center;
border: 1px solid #AAA;
}
#rateThisArticle .colQuestion{
width: 350px;
text-align: left;
}
<!-- TABLE #2 -->
<table border='1' cellspacing='1'>
<!-- Heading Data -->
<thead>
<!-- Column Headings -->
<tr>
<th class='colQuestion'><br /><br />Question</th>
<th id='col1'>Strongly<br />Disagree<br />1</th>
<th id='col2'><br />Disagree<br />2</th>
<th id='col3'><br />Neither<br />3</th>
<th id='col4'><br />Agree<br />4</th>
<th id='col5'>Strongly<br />Agree<br />5</th>
</tr>
</thead>
<!-- Body Data -->
<tbody>
<tr>
<td class="colQuestion">5.) This article was informative.</td>
<td>
<input id="Question5_Opt1" name="responseToQuestion[1]" type="radio" value="1" />
</td>
<td>
<input id="Question5_Opt2" name="responseToQuestion[1]" type="radio" value="2" />
</td>
<td>
<input id="Question5_Opt3" name="responseToQuestion[1]" type="radio" value="3" />
</td>
<td>
<input id="Question5_Opt4" name="responseToQuestion[1]" type="radio" value="4" checked="checked" />
</td>
<td>
<input id="Question5_Opt5" name="responseToQuestion[1]" type="radio" value="5" />
</td>
</tr>
<tr>
<td class="colQuestion">6.) This article was interesting.</td>
<td>
<input id="Question6_Opt1" name="responseToQuestion[2]" type="radio" value="1" />
</td>
<td>
<input id="Question6_Opt2" name="responseToQuestion[2]" type="radio" value="2" />
</td>
<td>
<input id="Question6_Opt3" name="responseToQuestion[2]" type="radio" value="3" checked="checked"/>
</td>
<td>
<input id="Question6_Opt4" name="responseToQuestion[2]" type="radio" value="4" />
</td>
<td>
<input id="Question6_Opt5" name="responseToQuestion[2]" type="radio" value="5" />
</td>
</tr>
</tbody>
</table>
Debbie
OK so you have skipped labels all together?
Also added an ID to every col? ( remember CSS identifiers carry no semantic meaning in the mark up)
As I said above, it seems to me that since the Radio Buttons are in an HTML Table, that they should be okay without Labels. (Although I’m sure Accessibility people will tear me to shreds for saying that!)
Thank you for the two code samples above.
Like you, I agree that the first one seemed awfully verbose.
And I didn’t care for the second one since it lost the columns, rows, and borders that a table brings to organizing the data. (Although I’m sure if I spent enough time, I could improve it to my liking.)
Also added an ID to every col? ( remember CSS identifiers carry no semantic meaning in the mark up)
I just did that out of habit since I think I will need those as “hooks” for my PHP, but I could be wrong?! :-/
So what do you think about my code and approach?
Is it acceptable?
Debbie
I just did that out of habit since I think I will need those as “hooks” for my PHP, but I could be wrong?!
PHP needs hooks?
Aside from what I have mentioned (labels and ID overkill) only that if you are going to numerate the name attribute… be sure it matches the actual readable name. Otherwise it might be more graceful to just use ‘responseToQuestion’ the array will be crated sequentially automatically , starting from 0.
Also, you could use CSS’s :before pseudo element and a counter to add the “#.)” ( incidentally, that should read either “#.” or “#)” to the question fields but that’s just shining the code. 
Except I am trying to build my Form so it populates the Form based on a “Survey Map” from my database.
So Article #1 might have Questions 1, 3, 5, 7 whereas Article #2 might have Questions 2, 4, 6, 8 so I need to assign a “question_id” based on what comes from the database and not leave it up to what you are saying, if I understand your suggestion.
All in all, it sounds like my Questions pass the HTML/CSS test, though?
Thanks,
Debbie
You could use WAI-ARIA to map the headings to the radio buttons:
<!-- TABLE #2 -->
<table border='1' cellspacing='1'>
<!-- Heading Data -->
<thead>
<!-- Column Headings -->
<tr>
<th class='colQuestion'><br /><br />Question</th>
<th id='col1'>Strongly<br />Disagree<br />1</th>
<th id='col2'><br />Disagree<br />2</th>
<th id='col3'><br />Neither<br />3</th>
<th id='col4'><br />Agree<br />4</th>
<th id='col5'>Strongly<br />Agree<br />5</th>
</tr>
</thead>
<!-- Body Data -->
<tbody>
<tr>
<td class="colQuestion" id="q5">5.) This article was informative.</td>
<td>
<input id="Question5_Opt1" name="responseToQuestion[1]" type="radio" value="1" aria-labelledby="q5 col1" />
</td>
<td>
<input id="Question5_Opt2" name="responseToQuestion[1]" type="radio" value="2" aria-labelledby="q5 col2" />
</td>
<td>
<input id="Question5_Opt3" name="responseToQuestion[1]" type="radio" value="3" aria-labelledby="q5 col3" />
</td>
<td>
<input id="Question5_Opt4" name="responseToQuestion[1]" type="radio" value="4" aria-labelledby="q5 col4" checked="checked" />
</td>
<td>
<input id="Question5_Opt5" name="responseToQuestion[1]" type="radio" value="5" aria-labelledby="q5 col5" />
</td>
</tr>
<tr>
<td class="colQuestion" id="q6">6.) This article was interesting.</td>
<td>
<input id="Question6_Opt1" name="responseToQuestion[2]" type="radio" value="1" aria-labelledby="q6 col1" />
</td>
<td>
<input id="Question6_Opt2" name="responseToQuestion[2]" type="radio" value="2" aria-labelledby="q6 col2" />
</td>
<td>
<input id="Question6_Opt3" name="responseToQuestion[2]" type="radio" value="3" aria-labelledby="q6 col3" checked="checked"/>
</td>
<td>
<input id="Question6_Opt4" name="responseToQuestion[2]" type="radio" value="4" aria-labelledby="q6 col4" />
</td>
<td>
<input id="Question6_Opt5" name="responseToQuestion[2]" type="radio" value="5" aria-labelledby="q6 col5" />
</td>
</tr>
</tbody>
</table>
(And I also think <th> would be more appropriate than <td> for the questions, by the way.)
So Article #1 might have Questions 1, 3, 5, 7 whereas Article #2 might have Questions 2, 4, 6, 8 so I need to assign a “question_id” based on what comes from the database and not leave it up to what you are saying, if I understand your suggestion.
OK I get it now. You’re using the array key to serve as a marker for the question ID in the DB. And, yes it seems to makes semantic sense.