SAM-2928 Formatting errors when showing feedback on Multiple Choice. (s…

…akaiproject#2908) Replace gifs with Font Awesome Icons
fuead · Jun 23, 2016 · 5005d1d · 5005d1d
1 parent c0f10ba
commit 5005d1d
Show file tree

Hide file tree

Showing 10 changed files with 75 additions and 59 deletions.
diff --git a/reference/library/src/morpheus-master/sass/base/_icons.scss b/reference/library/src/morpheus-master/sass/base/_icons.scss
@@ -88,4 +88,5 @@
 	.icon-sakai-delete{                     @extend .fa-times;}
 	.icon-sakai-pdf{                        @extend .fa-file-pdf-o;}
 	.icon-sakai-clip{                       @extend .fa-paperclip;}
+	.icon-sakai-check{                      @extend .fa-check;}	
 }
diff --git a/reference/library/src/morpheus-master/sass/modules/tool/samigo/_samigo.scss b/reference/library/src/morpheus-master/sass/modules/tool/samigo/_samigo.scss
@@ -63,7 +63,23 @@
 	.matrixSurvey{
 		padding: 0 1em 0 1em;
 	}
-
+
+	.feedBackCheck, .feedBackCross{
+		margin-right: 0.2em;
+	}
+
+	.feedBackCheck{
+		color: $okcolor;
+	}
+
+	.feedBackCross{
+		color: darken($errorcolor, 30%);
+	}
+
+	.feedBackMultipleChoice{
+		width: 2em;
+	}
+
 	.disabledField{
 		color: darken( $errorcolor, 30% );
 		text-decoration: line-through;

diff --git a/samigo/samigo-app/src/webapp/jsf/delivery/item/deliverCalculatedQuestion.jsp b/samigo/samigo-app/src/webapp/jsf/delivery/item/deliverCalculatedQuestion.jsp
@@ -31,16 +31,16 @@ should be included in file importing DeliveryMessages
   separator=" " first="0" rows="100">
   <h:column>
       <h:outputText value="#{answer.text} " escape="false" />
-      <h:graphicImage alt="#{deliveryMessages.alt_correct}" id="image"
+      <h:panelGroup styleClass="icon-sakai-check feedBackCheck" id="image"
         rendered="#{delivery.feedback eq 'true' &&
                     delivery.feedbackComponent.showCorrectResponse &&
-                    answer.isCorrect && answer.hasInput && !delivery.noFeedback=='true'}" url="/images/checkmark.gif">
-      </h:graphicImage>
-      <h:graphicImage alt="#{deliveryMessages.alt_incorrect}" id="image2"
+                    answer.isCorrect && answer.hasInput && !delivery.noFeedback=='true'}">
+      </h:panelGroup>
+      <h:panelGroup styleClass="icon-sakai-delete feedBackCross" id="image2"
         rendered="#{delivery.feedback eq 'true' &&
                     delivery.feedbackComponent.showCorrectResponse &&
-                    answer.isCorrect != null && !answer.isCorrect && answer.hasInput && !delivery.noFeedback=='true'}" url="/images/crossmark.gif">
-      </h:graphicImage>      
+                    answer.isCorrect != null && !answer.isCorrect && answer.hasInput && !delivery.noFeedback=='true'}" >
+      </h:panelGroup>      
 	  <h:inputText size="10" rendered="#{answer.hasInput 
 		&& delivery.actionString !='gradeAssessment' 
 		&& delivery.actionString !='reviewAssessment'}"

diff --git a/samigo/samigo-app/src/webapp/jsf/delivery/item/deliverFillInNumeric.jsp b/samigo/samigo-app/src/webapp/jsf/delivery/item/deliverFillInNumeric.jsp
@@ -46,17 +46,17 @@ should be included in file importing DeliveryMessages
   separator=" " first="0" rows="100">
   <h:column>
       <h:outputText value="#{answer.text} " escape="false" />
-      <h:graphicImage alt="#{deliveryMessages.alt_correct}" id="image"
+      <h:panelGroup styleClass="icon-sakai-check feedBackCheck" id="image"
         rendered="#{delivery.feedback eq 'true' &&
                     delivery.feedbackComponent.showCorrectResponse &&
                     answer.isCorrect && answer.hasInput && !delivery.noFeedback=='true' && 
-                    !delivery.isAnyInvalidFinInput}" url="/images/checkmark.gif">
-      </h:graphicImage>
-      <h:graphicImage alt="#{deliveryMessages.alt_correct}" id="ximage"
+                    !delivery.isAnyInvalidFinInput}" >
+      </h:panelGroup>
+      <h:panelGroup styleClass="icon-sakai-delete feedBackCross" id="ximage"
         rendered="#{delivery.feedback eq 'true' &&
                     delivery.feedbackComponent.showCorrectResponse &&
-                    answer.isCorrect != null && !answer.isCorrect && answer.hasInput && !delivery.noFeedback=='true'}" url="/images/crossmark.gif">
-      </h:graphicImage>
+                    answer.isCorrect != null && !answer.isCorrect && answer.hasInput && !delivery.noFeedback=='true'}">
+      </h:panelGroup>
 	  <h:inputText size="10" rendered="#{answer.hasInput 
 		&& delivery.actionString !='gradeAssessment' 
 		&& delivery.actionString !='reviewAssessment'}"

diff --git a/samigo/samigo-app/src/webapp/jsf/delivery/item/deliverFillInTheBlank.jsp b/samigo/samigo-app/src/webapp/jsf/delivery/item/deliverFillInTheBlank.jsp
@@ -31,16 +31,16 @@ should be included in file importing DeliveryMessages
   separator=" " first="0" rows="100">
   <h:column>
       <h:outputText value="#{answer.text} " escape="false" />
-      <h:graphicImage alt="#{deliveryMessages.alt_correct}" id="image"
+      <h:panelGroup styleClass="icon-sakai-check feedBackCheck" id="image"
         rendered="#{delivery.feedback eq 'true' &&
                     delivery.feedbackComponent.showCorrectResponse &&
-                    answer.isCorrect && answer.hasInput && !delivery.noFeedback=='true'}" url="/images/checkmark.gif">
-      </h:graphicImage>
-      <h:graphicImage alt="#{deliveryMessages.alt_correct}" id="ximage"
+                    answer.isCorrect && answer.hasInput && !delivery.noFeedback=='true'}" >
+      </h:panelGroup>
+      <h:panelGroup styleClass="icon-sakai-delete feedBackCross" id="ximage"
         rendered="#{delivery.feedback eq 'true' &&
                     delivery.feedbackComponent.showCorrectResponse &&
-                    answer.isCorrect != null && !answer.isCorrect && answer.hasInput && !delivery.noFeedback=='true'}" url="/images/crossmark.gif">
-      </h:graphicImage>
+                    answer.isCorrect != null && !answer.isCorrect && answer.hasInput && !delivery.noFeedback=='true'}">
+      </h:panelGroup>
       <h:inputText size="20" rendered="#{answer.hasInput 
 		&& delivery.actionString !='gradeAssessment' 
 		&& delivery.actionString !='reviewAssessment'}"

diff --git a/samigo/samigo-app/src/webapp/jsf/delivery/item/deliverImageMapQuestion.jsp b/samigo/samigo-app/src/webapp/jsf/delivery/item/deliverImageMapQuestion.jsp
@@ -81,14 +81,14 @@ should be included in file importing DeliveryMessages
 
 	<h:dataTable value="#{question.matchingArray}" var="matching">
 		<h:column>
-		  <h:graphicImage id="image"
+		  <h:panelGroup id="image"
 			rendered="#{matching.isCorrect}"
-			alt="#{deliveryMessages.alt_correct}" url="/images/checkmark.gif" >
-		  </h:graphicImage>
-		  <h:graphicImage id="ximage"
+			styleClass="icon-sakai-check feedBackCheck" >
+		  </h:panelGroup>
+		  <h:panelGroup id="ximage"
 			rendered="#{!matching.isCorrect}"
-			alt="#{deliveryMessages.alt_correct}" url="/images/crossmark.gif" >
-		  </h:graphicImage>
+			styleClass="icon-sakai-delete feedBackCross">
+		  </h:panelGroup>
 		  <h:graphicImage id="image2"
 			width="16" height="16"
 			alt="#{deliveryMessages.alt_incorrect}" url="/images/delivery/spacer.gif">

diff --git a/samigo/samigo-app/src/webapp/jsf/delivery/item/deliverMatching.jsp b/samigo/samigo-app/src/webapp/jsf/delivery/item/deliverMatching.jsp
@@ -38,14 +38,14 @@ should be included in file importing DeliveryMessages
   <h:dataTable value="#{question.matchingArray}" var="matching">
     <h:column rendered="#{delivery.feedback eq 'true' &&
        delivery.feedbackComponent.showCorrectResponse && !delivery.noFeedback=='true'}">
-      <h:graphicImage id="image"
+      <h:panelGroup id="image"
         rendered="#{matching.isCorrect || matching.isDistractor}"
-        alt="#{deliveryMessages.alt_correct}" url="/images/checkmark.gif" >
-      </h:graphicImage>
-      <h:graphicImage id="ximage"
+        styleClass="icon-sakai-check feedBackCheck" >
+      </h:panelGroup>
+      <h:panelGroup id="ximage"
         rendered="#{!matching.isCorrect && !matching.isDistractor}"
-        alt="#{deliveryMessages.alt_correct}" url="/images/crossmark.gif" >
-      </h:graphicImage>
+        styleClass="icon-sakai-delete feedBackCross" >
+      </h:panelGroup>
       <h:graphicImage id="image2"
         width="16" height="16"
         alt="#{deliveryMessages.alt_incorrect}" url="/images/delivery/spacer.gif">

diff --git a/samigo/samigo-app/src/webapp/jsf/delivery/item/deliverMultipleChoiceMultipleCorrect.jsp b/samigo/samigo-app/src/webapp/jsf/delivery/item/deliverMultipleChoiceMultipleCorrect.jsp
@@ -27,20 +27,19 @@ should be included in file importing DeliveryMessages
   <!-- ATTACHMENTS -->
   <%@ include file="/jsf/delivery/item/attachment.jsp" %>
 
-  <h:dataTable value="#{question.selectionArray}" var="selection" width="100%">
-    <h:column rendered="#{delivery.feedback eq 'true' &&
-       delivery.feedbackComponent.showCorrectResponse && !delivery.noFeedback=='true'}">
-      <h:graphicImage id="image"
+  <t:dataTable value="#{question.selectionArray}" var="selection" width="100%">
+    <t:column rendered="#{delivery.feedback eq 'true' &&
+       delivery.feedbackComponent.showCorrectResponse && !delivery.noFeedback=='true'}" styleClass="feedBackMultipleChoice">
+      <h:panelGroup id="image"
         rendered="#{selection.answer.isCorrect eq 'true' && selection.response}"
-        alt="#{deliveryMessages.alt_correct}" url="/images/checkmark.gif" >
-      </h:graphicImage>
-      <h:graphicImage id="image2"
+        styleClass="icon-sakai-check feedBackCheck">
+      </h:panelGroup>
+      <h:panelGroup id="image2"
         rendered="#{selection.answer.isCorrect != null && !selection.answer.isCorrect && selection.response}"
-        width="16" height="16"
-        alt="#{deliveryMessages.alt_incorrect}" url="/images/crossmark.gif">
-      </h:graphicImage>
-    </h:column>
-    <h:column>
+        styleClass="icon-sakai-delete feedBackCross">
+      </h:panelGroup>
+    </t:column>
+    <t:column>
      <f:verbatim><label></f:verbatim>
      <h:selectBooleanCheckbox value="#{selection.response}"
         disabled="#{delivery.actionString=='reviewAssessment'
@@ -51,8 +50,8 @@ should be included in file importing DeliveryMessages
      <h:outputText value=" #{selection.answer.text}" escape="false" />
      <f:verbatim></div></f:verbatim>
      <f:verbatim></label></f:verbatim>
-    </h:column>
-    <h:column>
+    </t:column>
+    <t:column>
       <h:panelGroup rendered="#{delivery.feedback eq 'true' &&
        delivery.feedbackComponent.showSelectionLevel &&
 	   selection.answer.generalAnswerFeedback != 'null' && selection.answer.generalAnswerFeedback != null && selection.answer.generalAnswerFeedback != ''&& selection.response}" > 
@@ -61,8 +60,8 @@ should be included in file importing DeliveryMessages
        <h:outputText value="#{commonMessages.feedback}#{deliveryMessages.column} " />
        <h:outputText value="#{selection.answer.generalAnswerFeedback}" escape="false" />
       </h:panelGroup>
-    </h:column>
-  </h:dataTable>
+    </t:column>
+  </t:dataTable>
 
   <h:panelGroup rendered="#{question.itemData.hasRationale}" >
     <f:verbatim><br /></f:verbatim>

diff --git a/samigo/samigo-app/src/webapp/jsf/delivery/item/deliverMultipleChoiceSingleCorrect.jsp b/samigo/samigo-app/src/webapp/jsf/delivery/item/deliverMultipleChoiceSingleCorrect.jsp
@@ -52,14 +52,14 @@ should be included in file importing DeliveryMessages
 
   <t:dataList layout="unorderedList" styleClass="samigo-question" itemStyleClass="samigo-question-answer" value="#{question.selectionArray}" var="selection">
     <h:panelGroup rendered="#{delivery.feedback eq 'true' && delivery.feedbackComponent.showCorrectResponse && !delivery.noFeedback=='true'}">
-      <h:graphicImage id="image"
+      <h:panelGroup id="image"
         rendered="#{(selection.answer.isCorrect eq 'true' || (question.itemData.partialCreditFlag && selection.answer.partialCredit gt 0)) && selection.response}"
-        alt="#{deliveryMessages.alt_correct}" url="/images/checkmark.gif" >
-      </h:graphicImage>
-      <h:graphicImage id="image2"
+        styleClass="icon-sakai-check feedBackCheck" >
+      </h:panelGroup>
+      <h:panelGroup id="image2"
         rendered="#{((question.itemData.partialCreditFlag && (selection.answer.partialCredit le 0 || selection.answer.partialCredit == null)) || (selection.answer.isCorrect != null && !selection.answer.isCorrect)) && selection.response}"
-        width="16" height="16" alt="#{deliveryMessages.alt_incorrect}" url="/images/crossmark.gif">
-      </h:graphicImage>
+        styleClass="icon-sakai-delete feedBackCross" >
+      </h:panelGroup>
     </h:panelGroup>
     <div class="mcscFixUpTarget"></div>
 	<h:panelGroup> 	 

diff --git a/samigo/samigo-app/src/webapp/jsf/delivery/item/deliverTrueFalse.jsp b/samigo/samigo-app/src/webapp/jsf/delivery/item/deliverTrueFalse.jsp
@@ -33,12 +33,12 @@ should be included in file importing DeliveryMessages
            delivery.feedbackComponent.showCorrectResponse && !delivery.noFeedback=='true'}">
       <h:dataTable value="#{question.answers}" var="answer">
         <h:column>
-          <h:graphicImage id="image" rendered="#{answer.description eq 'true' && question.responseId eq answer.value}"
-            alt="#{deliveryMessages.alt_correct}" url="/images/checkmark.gif" >
-          </h:graphicImage>
-          <h:graphicImage id="image2" rendered="#{answer.description ne 'true' && question.responseId eq answer.value}"
-            alt="#{deliveryMessages.alt_incorrect}" url="/images/crossmark.gif">
-          </h:graphicImage>
+          <h:panelGroup id="image" rendered="#{answer.description eq 'true' && question.responseId eq answer.value}"
+            styleClass="icon-sakai-check feedBackCheck" >
+          </h:panelGroup>
+          <h:panelGroup id="image2" rendered="#{answer.description ne 'true' && question.responseId eq answer.value}"
+            styleClass="icon-sakai-delete feedBackCross">
+          </h:panelGroup>
        </h:column>
      </h:dataTable>
    </h:column>