SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Creating a Likert Scale?

    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...

    Attachment 60547

    Attachment 60549


    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??

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,820
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.

  3. #3
    SitePoint Mentor silver trophybronze trophy
    Mikl's Avatar
    Join Date
    Dec 2011
    Location
    Edinburgh, Scotland
    Posts
    1,606
    Mentioned
    66 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    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.
    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

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,820
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.


    Code:
    <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.

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    #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.


    Code:
    <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...

    HTML Code:
    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

  8. #8
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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

  9. #9
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,820
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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..

    Code:
    <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:

    Code:
    <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>

  10. #10
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Here is what I came up with...

    Code CSS:
    /****************************/
    /* 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;
    }


    HTML Code:
    	<!-- 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

  11. #11
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,820
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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)

  12. #12
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    OK so you have skipped labels all together?
    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

  13. #13
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,820
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.

  14. #14
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    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.
    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

  15. #15
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Location
    Oskarshamn, Sweden
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    You could use WAI-ARIA to map the headings to the radio buttons:
    HTML Code:
    <!-- 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.)

  16. #16
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,820
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •