Skip to content

Commit

Permalink
Dev: some accessibilty issue for ranking (add label)
Browse files Browse the repository at this point in the history 
Dev: HTML ability in ranking
Dev : fixed ranking for IE8
Dev: start reviewing template
  • Loading branch information
@Shnoulle
Shnoulle committed Jul 4, 2012
1 parent 2a5b93c commit 8a8df8f
Show file tree
Hide file tree
Showing 4 changed files with 23 additions and 111 deletions.
21 changes: 17 additions & 4 deletions application/helpers/qanda_helper.php
View file
Expand Up @@ -2089,7 +2089,15 @@ function do_ranking($ia)
for ($i=1; $i<=$anscount; $i++)
{
$myfname=$ia[1].$i;
$answer .= "\n<li class=\"select-item\"><select name=\"{$myfname}\" id=\"answer{$myfname}\">";
$answer .= "\n<li class=\"select-item\">";
$answer .="<label for=\"answer{$myfname}\">";
if($i==1){
$answer .=$clang->gT('First choice');
}else{
$answer .=$clang->gT('Next choice');
}
$answer .= "</label>";
$answer .= "<select name=\"{$myfname}\" id=\"answer{$myfname}\">\n";
if (!$_SESSION['survey_'.Yii::app()->getConfig('surveyID')][$ia[1]])
{
$answer .= "\t<option value=\"\"".SELECTED.">".$clang->gT('Please choose...')."</option>\n";
Expand All @@ -2108,23 +2116,28 @@ function do_ranking($ia)
$answer .="</select>";
// Hidden form: maybe can be replaced with ranking.js
$answer .="<input type=\"hidden\" id=\"java{$myfname}\" disabled=\"disabled\" value=\"{$thisvalue}\"/>";
// TODO put some div for $ansrow['answer'] with HTML
$answer .="</li>";
$inputnames[]=$myfname;
}
$answer .="</ul>"
. "<div style='display:none' id='ranking-{$ia[0]}-maxans'>{".$max_answers."}</div>"
. "<div style='display:none' id='ranking-{$ia[0]}-minans'>{".$min_answers."}</div>"
. "</div>";

// The list with HTML answres
$answer .="<div style=\"display:none\">";
foreach ($answers as $ansrow)
{
$answer.="<div id=\"htmlblock-{$ia['0']}-{$ansrow['code']}\">{$ansrow['answer']}</div>";
}
$answer .="</div>";
header_includes("ranking.js");
header_includes("ranking.css","css");

$answer .= "<script type='text/javascript'>\n"
. " <!--\n"
. "var translt = {
choicetitle: '".$clang->gT("Your Choices",'js')."',
ranktitle: '".$clang->gT("Your Ranking",'js')."',
ranktitle: '".$clang->gT("Your Ranking",'js')."'
};\n"
." doDragDropRank({$ia[0]},{$aQuestionAttributes["showpopups"]});\n"
." -->\n"
Expand Down
6 changes: 4 additions & 2 deletions scripts/ranking.js
View file
Expand Up @@ -38,14 +38,16 @@ if (typeof samelistheight === 'undefined'){samelistheight=true;}
$('#question'+qID+' .answers-list .select-item option:selected').each(function(index, Element) {
if($(this).val()!=''){
ranked.push($(this).val());
var liCode = '<li class="ui-state-default choice" id="choice_'+$(this).val()+'">' + $(this).text() + '</li>'
htmloption=$("#htmlblock-"+qID+'-'+$(this).val()).html();
var liCode = '<li class="ui-widget-content choice" id="choice_'+$(this).val()+'">' + htmloption + '</li>'
$(liCode).appendTo('#sortable-rank-'+qID+'');
}
});
$('#question'+qID+' .answers-list .select-item:first option').each(function(index, Element) {
var thisvalue=$(this).val();
if(thisvalue!='' && jQuery.inArray(thisvalue,ranked)<0){
var liCode = '<li class="ui-state-default choice" id="choice_'+$(this).val()+'">' + $(this).text() + '</li>'
htmloption=$("#htmlblock-"+qID+'-'+$(this).val()).html();
var liCode = '<li class="ui-widget-content choice" id="choice_'+$(this).val()+'">' + htmloption + '</li>'
$(liCode).appendTo('#sortable-choice-'+qID+'');
}
});
Expand Down
6 changes: 2 additions & 4 deletions styles-public/ranking.css
View file
@@ -1,7 +1,7 @@
/* Drag-n-drop ranking default styles */

.dragDropTable .SortableTitle{display:block}
.dragDropTable .columns2{width:50%;float:left;margin:0;padding:0}
.dragDropTable .columns2{width:50%;float:left;margin:0;padding:0;}
:dir(ltr) .dragDropTable .columns2{float:right}
.dragDropTable .clear{clear:both}

Expand Down Expand Up @@ -29,12 +29,10 @@
.dragDropTable .dragDropChoiceList li,
.dragDropTable .dragDropRankList li {
margin: 3px;
*margin-left: -13px; /* IE7 and below */
padding: 3px;
min-height: 1.3em;
height:auto !important;height: 1.3em; /* IE6 and below hack */
font-weight: normal;
cursor: move;
display: block; /* Force the li to full width */
clear:both;
}

101 changes: 0 additions & 101 deletions templates/default/template.css
View file
Expand Up @@ -1129,114 +1129,13 @@ ul.cols-8 li,ul.cols-8-ul,table.cols-8 td {

.ranking select {
min-width: 140px;
min-height: 60px;
}

.ranking option {
padding-top: 1px;
padding-bottom: 1px;
}

table.rank td.helptext {
font-size: 10px;
padding: 5px;
}

table.rank td.helptext {
font-size: 0.9em;
padding: 5px 0 0 5px;
}


/* ***********ranking questions (drag and drop) by N8B****************/

.ranking .answers table {
width: 100%; /* fill it, to make it look less ugly and act right */
}

.dragDropTable {
border: 0 none;
border-collapse: collapse;
width: 100%;
}

.dragDropTable td {
vertical-align: top;
width: 50%;
padding: 20px;
}

.dragDropTable .dragDropHeader {
font-weight: bold;
}

.dragDropTable .dragDropChoices,
.dragDropTable .dragDropRanks {
margin: 5px 0 0 0;
background: transparent none;
border: 0 none;
}

/* this is the color of the backgrounds/drop areas of the columns */
.dragDropTable .dragDropChoiceList,
.dragDropTable .dragDropRankList {
width: 100%;
min-height: 2.4em;
_height: 2.4em; /* IE6 and below hack */
margin: 0;
padding: 0;
list-style-type: none;
background: white;
border: 1px solid gray;
}

/* the draggable itself */
.dragDropTable .dragDropChoiceList li,
.dragDropTable .dragDropRankList li {
margin: 3px;
padding: 6px;
min-height: 1.3em;
_height: 1.3em; /* IE6 and below hack */
font-weight: normal;
cursor: move;
display: block; /* Force the li to full width */
background: #EBEBEB;
border: 1px solid #9C9C9C;
text-align: left;
line-height: 1.3em;
}

/* placeholder */
.dragDropTable .dragDropRankList li.ui-sortable-placeholder,
.dragDropTable .dragDropChoiceList li.ui-sortable-placeholder {
background: #E8FFE9;
border-color: #5AC75D;
border-style: dotted;
}

/* background */
.dragDropTable .dragDropRankList li.ui-sortable-placeholder.ui-sortable-background {
/* default has no border */
background: #FDFFC7;
}


/* the class applied to a maxed-out table */
.dragDropTable .dragDropRankList.dragDropRankMaxedOut {
border: 1px solid red;
}

/* the prefix */
.dragDropTable .dragDropRankList li span.DDRnumberprefix,
.dragDropTable .dragDropChoiceList li span.DDRnumberprefix {
padding: 0px 6px;
background: #E8FFE9;
border: 1px solid #5AC75D;
margin: 0px 10px 5px 0px;
float: left;
color: #5AC75D;
}


.choice-5-pt-radio .answer li {
display: inline;
Expand Down

0 comments on commit 8a8df8f

Please sign in to comment.