Index: lams_tool_scratchie/web/includes/css/scratchie-learning.scss =================================================================== diff -u -r29934b375099b67b06d6515d65c7bb3d72ace59e -rdf26095fede71a40145385ab3f73c9d2f981e11b --- lams_tool_scratchie/web/includes/css/scratchie-learning.scss (.../scratchie-learning.scss) (revision 29934b375099b67b06d6515d65c7bb3d72ace59e) +++ lams_tool_scratchie/web/includes/css/scratchie-learning.scss (.../scratchie-learning.scss) (revision df26095fede71a40145385ab3f73c9d2f981e11b) @@ -9,10 +9,6 @@ margin-left: -1rem; } -.scartchie-image { - border: 0; -} - /*----------countdown growl----------------*/ .jGrowl { font-size: 22px; @@ -105,4 +101,53 @@ .fake-validation-input { visibility: hidden; height: 0px; -} \ No newline at end of file +} + +/*----------Scratchie SVG----------------*/ +@keyframes reveal-tick { + to { + stroke-dashoffset: 0; + } +} + +.icon-mask, +.letter-mask { + stroke-dasharray: 12296; + stroke-dashoffset: 12296; +} + +.scratched { + + .icon-mask, + .letter-mask { + stroke-dashoffset: 0; + } +} + +.show-tick .icon-mask, +.show-tick .letter-mask, +.show-cross .icon-mask, +.show-cross .letter-mask { + animation: reveal-tick 2s ease-in-out both; +} + +.show-tick .cross-icon { + opacity: 0; +} + +.show-cross .tick-icon { + opacity: 0; +} + +.scartchie-image-col { + text-align: right; + + a { + padding: 0; + } + svg { + margin: 0 -0.5rem 0 0.5rem; + padding: initial; + } +} + Index: lams_tool_scratchie/web/includes/images/answer-1.png =================================================================== diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -rdf26095fede71a40145385ab3f73c9d2f981e11b Binary files differ Index: lams_tool_scratchie/web/includes/images/answer-10.png =================================================================== diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -rdf26095fede71a40145385ab3f73c9d2f981e11b Binary files differ Index: lams_tool_scratchie/web/includes/images/answer-2.png =================================================================== diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -rdf26095fede71a40145385ab3f73c9d2f981e11b Binary files differ Index: lams_tool_scratchie/web/includes/images/answer-3.png =================================================================== diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -rdf26095fede71a40145385ab3f73c9d2f981e11b Binary files differ Index: lams_tool_scratchie/web/includes/images/answer-4.png =================================================================== diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -rdf26095fede71a40145385ab3f73c9d2f981e11b Binary files differ Index: lams_tool_scratchie/web/includes/images/answer-5.png =================================================================== diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -rdf26095fede71a40145385ab3f73c9d2f981e11b Binary files differ Index: lams_tool_scratchie/web/includes/images/answer-6.png =================================================================== diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -rdf26095fede71a40145385ab3f73c9d2f981e11b Binary files differ Index: lams_tool_scratchie/web/includes/images/answer-7.png =================================================================== diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -rdf26095fede71a40145385ab3f73c9d2f981e11b Binary files differ Index: lams_tool_scratchie/web/includes/images/answer-8.png =================================================================== diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -rdf26095fede71a40145385ab3f73c9d2f981e11b Binary files differ Index: lams_tool_scratchie/web/includes/images/answer-9.png =================================================================== diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -rdf26095fede71a40145385ab3f73c9d2f981e11b Binary files differ Index: lams_tool_scratchie/web/includes/images/scratchie-correct-animation.gif =================================================================== diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -rdf26095fede71a40145385ab3f73c9d2f981e11b Binary files differ Index: lams_tool_scratchie/web/includes/images/scratchie-correct.png =================================================================== diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -rdf26095fede71a40145385ab3f73c9d2f981e11b Binary files differ Index: lams_tool_scratchie/web/includes/images/scratchie-wrong-animation.gif =================================================================== diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -rdf26095fede71a40145385ab3f73c9d2f981e11b Binary files differ Index: lams_tool_scratchie/web/includes/images/scratchie-wrong.png =================================================================== diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -rdf26095fede71a40145385ab3f73c9d2f981e11b Binary files differ Index: lams_tool_scratchie/web/includes/images/scratchie.gif =================================================================== diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -rdf26095fede71a40145385ab3f73c9d2f981e11b Binary files differ Index: lams_tool_scratchie/web/pages/learning/learning.jsp =================================================================== diff -u -rdf77b7fe375d1d68d4e064748653be8ac8816f93 -rdf26095fede71a40145385ab3f73c9d2f981e11b --- lams_tool_scratchie/web/pages/learning/learning.jsp (.../learning.jsp) (revision df77b7fe375d1d68d4e064748653be8ac8816f93) +++ lams_tool_scratchie/web/pages/learning/learning.jsp (.../learning.jsp) (revision df26095fede71a40145385ab3f73c9d2f981e11b) @@ -113,29 +113,17 @@ $('[data-bs-toggle="tooltip"]').tooltip(); }); - //scratch image (used by both scratchMcq() and scratchVsa()) + //Scratch SVG. Function is used by both scratchMcq() and scratchVsa(). function scratchImage(itemUid, optionUid, isCorrect) { // first show animation, then put static image - var imageSuffix = isCorrect ? 'correct' : 'wrong'; - var image = $('#image-' + itemUid + '-' + optionUid); + var svg = $('#svg-' + itemUid + '-' + optionUid); //show VSA question image - if (image.css('visibility') != 'visible') { - image.css('visibility', 'visible'); + if (svg.css('visibility') != 'visible') { + svg.css('visibility', 'visible'); } - image.on('load', function(){ - var image = $(this).off("load"); - // show static image after animation - setTimeout( - function(){ - image.attr("src", "includes/images/scratchie-" + imageSuffix + ".png"); - image.attr("alt", isCorrect ? '' : - ''); - }, - 1300 - ); - }).attr("src", "includes/images/scratchie-" + imageSuffix + "-animation.gif"); + svg.addClass("show-" + (isCorrect ? 'tick' : 'cross')); } //scratch MCQ answer @@ -161,13 +149,13 @@ //disable scratching var imageLinkIds = json.optionCorrect ? "[id^=imageLink-" + itemUid + "]" : '#imageLink' + '-' + itemUid + '-' + optionUid; var imageLinks = $(imageLinkIds); - imageLinks.removeAttr('onClick').removeAttr('onDblClick'); + imageLinks.removeAttr("href").removeAttr('onClick').removeAttr('onDblClick'); imageLinks.css('cursor', 'default'); imageLinks.attr('aria-disabled', 'true'); if (json.optionCorrect) { - //fade all realted images - $("[id^=image-" + itemUid + "]").not("img[src*='scratchie-correct-animation.gif']").not("img[src*='scratchie-correct.gif']").fadeTo(1300, 0.3); + //fade all related images + $("[id^=svg-" + itemUid + "]").not("#svg-" + itemUid + "-" + optionUid).fadeTo(1300, 0.3); //enable Finish button checkAllCorrectMcqAnswersFound(); @@ -221,10 +209,10 @@ paintNewVsaAnswer(itemUid, answer); } - var isScrathed = $(trId + ' img[src*="scratchie-correct.png"], ' + trId + ' img[src*="scratchie-wrong.png"]', "#scratches-" + itemUid).length > 0; + var isScrathed = $(trId + ' .scratched,' + trId + ' .show-tick,' + trId + ' .show-cross', "#vsa-" + itemUid).length > 0; //highlight already scratched answer if (isScrathed) { - var tableRowTohighlight = $(trId, "#scratches-" + itemUid); + var tableRowTohighlight = $(trId, "#vsa-" + itemUid); $([document.documentElement, document.body]).animate( { scrollTop: tableRowTohighlight.offset().top @@ -235,13 +223,13 @@ } ); - //scratch it otherwise + //scratch it otherwise } else { scratchImage(itemUid, answerHashToScratch, json.isAnswerCorrect); if (json.isAnswerCorrect) { //disable further answering - $("[id^=image-" + itemUid + "]").not("img[src*='scratchie-correct-animation.gif']").not("img[src*='scratchie-correct.gif']").fadeTo(1300, 0.3); + $("[id^=svg-" + itemUid + "]").not("#svg-" + itemUid + "-" + answerHashToScratch).fadeTo(1300, 0.3); //disable submit button $("#type-your-answer-" + itemUid).hide(); @@ -260,26 +248,35 @@ //add new VSA answer to the table (required in case user entered answer not present in the previous answers) function paintNewVsaAnswer(itemUid, answer) { - var optionsLength = $("#scratches #scratches-" + itemUid + " .row").length; - var idSuffix = '-' + itemUid + '-' + hashCode(answer); + var optionsLength = $("#vsa-" + itemUid + " .row").length; + var svgId = itemUid + '-' + hashCode(answer); - var trElem = - '
' + - '
' + - '' + - '
' + - - '
' + - '
' + - xmlEscape(answer) + - '
' + - '
' + - '
' + - '' + - '
' + - '
' + - '
'; - $(".table#scratches-" + itemUid).append(trElem); + //get SVG from .jsp + $.ajax({ + type : "POST", + async: false, + url : '', + data : "type=full&svgId=" + svgId + "&letter=" + optionsLength + "&isHidden=false", + success : function(scratchieSvg) { + var trElem = + '
' + + '
' + + scratchieSvg + + '
' + + + '
' + + '
' + + xmlEscape(answer) + + '
' + + '
' + + '
' + + '' + + '
' + + '
' + + '
'; + $("#vsa-" + itemUid).append(trElem); + } + }); } function checkAllCorrectMcqAnswersFound() { Index: lams_tool_scratchie/web/pages/learning/parts/scratchieSvg.jsp =================================================================== diff -u --- lams_tool_scratchie/web/pages/learning/parts/scratchieSvg.jsp (revision 0) +++ lams_tool_scratchie/web/pages/learning/parts/scratchieSvg.jsp (revision df26095fede71a40145385ab3f73c9d2f981e11b) @@ -0,0 +1,65 @@ +<%@ include file="/common/taglibs.jsp"%> +<%-- TYPE parameter can have one of the following values: correct, incorrect, letter, full.--%> + + Index: lams_tool_scratchie/web/pages/learning/scratchies.jsp =================================================================== diff -u -r8121ab6e6a1166176a6c77a34a4eeee03ff0787c -rdf26095fede71a40145385ab3f73c9d2f981e11b --- lams_tool_scratchie/web/pages/learning/scratchies.jsp (.../scratchies.jsp) (revision 8121ab6e6a1166176a6c77a34a4eeee03ff0787c) +++ lams_tool_scratchie/web/pages/learning/scratchies.jsp (.../scratchies.jsp) (revision df26095fede71a40145385ab3f73c9d2f981e11b) @@ -1,5 +1,5 @@ <%@ include file="/common/taglibs.jsp"%> - + <%-- Prepare same content for each question Etherpad. Each group participant's first and last name --%> @@ -22,7 +22,7 @@ -
+
 ${item.mark}
@@ -34,52 +34,66 @@
+ <%-- 1:TYPE_MULTIPLE_CHOICE, 8:TYPE_MARK_HEDGING --%>
-
+ + +
- <fmt:message key='label.correct'/> + + + + + - <fmt:message key='label.incorrect'/> + + + + + - <fmt:message key='label.monitoring.summary.answer'/> ${status.index + 1} + + + + + + - - - onDblClick= - - - onClick= - - - <%-- call this function either on click or double click --%> - "scratchMcq(${item.uid}, ${optionDto.qbOptionUid}); return false;"> - <fmt:message key='label.monitoring.summary.answer'/> ${status.index + 1} + + + onDblClick= + + + onClick= + + + <%-- call this function either on click or double click --%> + "scratchMcq(${item.uid}, ${optionDto.qbOptionUid}); return false;"> + + + + + + -
+
${optionDto.attemptOrder} @@ -111,31 +125,41 @@
+ <%-- 3:TYPE_VERY_SHORT_ANSWERS --%> -
+
-
+ +
- <fmt:message key='label.correct'/> + + + + + - <fmt:message key='label.incorrect'/> + + + + + - <fmt:message key='label.monitoring.summary.answer'/> ${status.index + 1}style="visibility: hidden;" - /> + + + + + + -
+
${optionDto.attemptOrder} @@ -173,7 +197,8 @@ ui-autocomplete-input" style="display: inline-block; width: 70%;" data-item-uid="${item.uid}" aria-labelledby="type-your-answer-descr-${item.uid}"/> -