Index: lams_tool_scratchie/web/pages/learning/scratchies.jsp
===================================================================
diff -u -r5085f565abf2755321060bb008683befc014dbb3 -re8a7110708b15579af2c6b31ac52a6da427fef6d
--- lams_tool_scratchie/web/pages/learning/scratchies.jsp	(.../scratchies.jsp)	(revision 5085f565abf2755321060bb008683befc014dbb3)
+++ lams_tool_scratchie/web/pages/learning/scratchies.jsp	(.../scratchies.jsp)	(revision e8a7110708b15579af2c6b31ac52a6da427fef6d)
@@ -1,3 +1,5 @@
+<%@ include file="/common/taglibs.jsp"%>
+
 <c:forEach var="item" items="${sessionMap.itemList}">
 	<div class="lead">
         <a name="${item.qbQuestion.name}" style="text-decoration:none;color:black"><c:out value="${item.qbQuestion.name}" escapeXml="true" /></a>
@@ -6,83 +8,135 @@
 		<c:out value="${item.qbQuestion.description}" escapeXml="false" />
 	</div>
 
-	<table id="scratches" class="table table-hover">
-		<c:forEach var="optionDto" items="${item.optionDtos}" varStatus="status">
-			<tr id="tr${optionDto.qbOption.uid}">
-				<td style="width: 40px;">
-					<c:choose>
-						<c:when test="${optionDto.scratched && optionDto.qbOption.correct}">
-							<img src="<lams:WebAppURL/>includes/images/scratchie-correct.png" class="scartchie-image"
-								 id="image-${item.uid}-${optionDto.qbOption.uid}">
-						</c:when>
-						<c:when test="${optionDto.scratched && !optionDto.qbOption.correct}">
-							<img src="<lams:WebAppURL/>includes/images/scratchie-wrong.png" class="scartchie-image"
-								 id="image-${item.uid}-${optionDto.qbOption.uid}">
-						</c:when>
-						<c:when test="${sessionMap.userFinished || item.unraveled || !isUserLeader || (mode == 'teacher') || showResults}">
-							<img src="<lams:WebAppURL/>includes/images/answer-${status.index + 1}.png" class="scartchie-image"
-								 id="image-${item.uid}-${optionDto.qbOption.uid}">
-						</c:when>
-						<c:otherwise>
-							<a href="#nogo" onclick="scratchItem(${item.uid}, ${optionDto.qbOption.uid}); return false;"
-								id="imageLink-${item.uid}-${optionDto.qbOption.uid}"> <img
-								src="<lams:WebAppURL/>includes/images/answer-${status.index + 1}.png" class="scartchie-image"
-								id="image-${item.uid}-${optionDto.qbOption.uid}" />
-							</a>
-						</c:otherwise>
-					</c:choose> 
-					
-					<c:if test="${(showResults || mode == 'teacher') && (optionDto.attemptOrder != -1)}">
-						<div style="text-align: center; margin-top: 2px;">
-							<fmt:message key="label.choice.number">
-								<fmt:param>${optionDto.attemptOrder}</fmt:param>
-							</fmt:message>
+	<c:choose>
+	<c:when test="${item.qbQuestion.type == 1}">
+		<table class="table table-hover scratches">
+			<c:forEach var="optionDto" items="${item.optionDtos}" varStatus="status">
+				<tr id="tr${optionDto.qbOption.uid}">
+					<td style="width: 40px;">
+						<c:choose>
+							<c:when test="${optionDto.scratched && optionDto.qbOption.correct}">
+								<img src="<lams:WebAppURL/>includes/images/scratchie-correct.png" class="scartchie-image"
+									 id="image-${item.uid}-${optionDto.qbOption.uid}">
+							</c:when>
+							<c:when test="${optionDto.scratched && !optionDto.qbOption.correct}">
+								<img src="<lams:WebAppURL/>includes/images/scratchie-wrong.png" class="scartchie-image"
+									 id="image-${item.uid}-${optionDto.qbOption.uid}">
+							</c:when>
+							<c:when test="${sessionMap.userFinished || item.unraveled || !isUserLeader || (mode == 'teacher') || showResults}">
+								<img src="<lams:WebAppURL/>includes/images/answer-${status.index + 1}.png" class="scartchie-image"
+									 id="image-${item.uid}-${optionDto.qbOption.uid}">
+							</c:when>
+							<c:otherwise>
+								<a href="#nogo" onclick="scratchMcq(${item.uid}, ${optionDto.qbOption.uid}); return false;"
+									id="imageLink-${item.uid}-${optionDto.qbOption.uid}"> <img
+									src="<lams:WebAppURL/>includes/images/answer-${status.index + 1}.png" class="scartchie-image"
+									id="image-${item.uid}-${optionDto.qbOption.uid}" />
+								</a>
+							</c:otherwise>
+						</c:choose> 
+						
+						<c:if test="${(showResults || mode == 'teacher') && (optionDto.attemptOrder != -1)}">
+							<div style="text-align: center; margin-top: 2px;">
+								<fmt:message key="label.choice.number">
+									<fmt:param>${optionDto.attemptOrder}</fmt:param>
+								</fmt:message>
+							</div>
+						</c:if>
+					</td>
+	
+					<td
+						<c:if test="${fn:length(optionDto.confidenceLevelDtos) > 0}">class="answer-with-confidence-level-portrait"</c:if>
+					>
+						<div class="answer-description">
+							<c:out value="${optionDto.qbOption.name}" escapeXml="false" />
 						</div>
-					</c:if>
-				</td>
+						
+						<c:if test="${fn:length(optionDto.confidenceLevelDtos) > 0}">
+							<hr class="hr-confidence-level" />
+						
+							<div>
+								<c:forEach var="confidenceLevelDto" items="${optionDto.confidenceLevelDtos}" varStatus="status">
+									<%@ include file="parts/confidenceLevelPortrait.jsp"%>
+								</c:forEach>
+							</div>
+						</c:if>
+					</td>
+				</tr>
+			</c:forEach>
+		</table>
+	</c:when>
+	
+	<c:otherwise>
+		<table id="scratches-${item.uid}"  class="table table-hover scratches">
+			<c:forEach var="optionDto" items="${item.optionDtos}" varStatus="status">
+				<tr id="tr-${status.index}">
+				
+					<td style="width: 40px; border: none;">
+						<c:choose>
+							<c:when test="${optionDto.scratched && optionDto.correct}">
+								<img src="<lams:WebAppURL/>includes/images/scratchie-correct.png" class="scartchie-image"
+									 id="image-${item.uid}-${optionDto.answerHash}">
+							</c:when>
+							<c:when test="${optionDto.scratched && !optionDto.correct}">
+								<img src="<lams:WebAppURL/>includes/images/scratchie-wrong.png" class="scartchie-image"
+									 id="image-${item.uid}-${optionDto.answerHash}">
+							</c:when>
+							<c:otherwise>
+								<img src="<lams:WebAppURL/>includes/images/answer-${status.index + 1}.png" class="scartchie-image"
+									id="image-${item.uid}-${optionDto.answerHash}" 
+									<c:if test="${!sessionMap.userFinished && !item.unraveled && (mode != 'teacher') && !showResults}">style="visibility: hidden;"</c:if>
+									/>
+							</c:otherwise>
+						</c:choose>
+						
+						<c:if test="${(showResults || mode == 'teacher') && (optionDto.attemptOrder != -1)}">
+							<div style="text-align: center; margin-top: 2px;">
+								<fmt:message key="label.choice.number">
+									<fmt:param>${optionDto.attemptOrder}</fmt:param>
+								</fmt:message>
+							</div>
+						</c:if>
+					</td>
+	
+					<td class="answer-with-confidence-level-portrait">
+						<div class="answer-description">
+							<c:out value="${optionDto.answer}" escapeXml="false" />
+						</div>
+						
+						<c:if test="${fn:length(optionDto.confidenceLevelDtos) > 0}">
+							<hr class="hr-confidence-level" />
+							
+							<div>
+								<c:forEach var="confidenceLevelDto" items="${optionDto.confidenceLevelDtos}" varStatus="status">
+									<%@ include file="parts/confidenceLevelPortrait.jsp"%>
+								</c:forEach>
+							</div>
+						</c:if>
+					</td>
+				</tr>
+			</c:forEach>
+		</table>
 
-				<td
-					<c:if test="${fn:length(optionDto.confidenceLevelDtos) > 0}">class="answer-with-confidence-level-portrait"</c:if>
-				>
-					<div class="answer-description">
-						<c:out value="${optionDto.qbOption.name}" escapeXml="false" />
-					</div>
-					
-					<c:if test="${fn:length(optionDto.confidenceLevelDtos) > 0}">
-						<hr class="hr-confidence-level" />
-					
-						<div>
-							<c:forEach var="confidenceLevelDto" items="${optionDto.confidenceLevelDtos}" varStatus="status">
+		<c:if test="${!sessionMap.userFinished && !item.unraveled && isUserLeader && (mode != 'teacher') && !showResults}">
+			<div id="type-your-answer-${item.uid}" style="padding: 0 0 15px 100px; margin-top:-20px;">
+				<div>
+					<fmt:message key="label.type.your.group.answer" />
+				</div>
 							
-								<div class="c100 p${confidenceLevelDto.level}0 small" data-toggle="tooltip" data-placement="top" title="${confidenceLevelDto.userName}">
-									<span>
-										<c:choose>
-											<c:when test="${confidenceLevelDto.portraitUuid == null}">
-												<div class="portrait-generic-sm portrait-color-${confidenceLevelDto.userId % 7}"></div>
-											</c:when>
-											<c:otherwise>
-			    								<img class="portrait-sm portrait-round" src="${lams}download/?uuid=${confidenceLevelDto.portraitUuid}&preferDownload=false&version=4" alt="">
-											</c:otherwise>
-										</c:choose>
-									</span>
-									
-									<div class="slice">
-										<div class="bar"></div>
-										<div class="fill"></div>
-									</div>
-									
-									<div class="confidence-level-percentage">
-										${confidenceLevelDto.level}0%
-									</div>
-								</div>
-	    
-							</c:forEach>
-						</div>
-					</c:if>
-				</td>
-			</tr>
-		</c:forEach>
-	</table>
+				<div>
+					<input type="text" id="input-${item.uid}" size="70" class="form-control input-sm voffset5 submit-user-answer-input
+						<c:if test="${item.qbQuestion.autocompleteEnabled}">ui-autocomplete-input</c:if>"
+						style="display: inline-block; width: 70%;" data-item-uid="${item.uid}"/>
+							
+					<button class="btn btn-default btn-sm submit-user-answer" data-item-uid="${item.uid}" >
+						<fmt:message key="label.button.submit" />
+					</button>
+				</div>		
+			</div>
+		</c:if>
+	</c:otherwise>
+	</c:choose>
 	
 	<%-- show burning questions --%>
 	<c:if test="${!showResults && scratchie.burningQuestionsEnabled && (isUserLeader || (mode == 'teacher'))}">