--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="width" content="1057.32">
+ <meta name="height" content="595.276">
+ <style>
+
+
+ @font-face {
+ font-family: 'f';
+ src: url('fc.woff') format('woff');
+ font-weight: bold;
+ font-style: normal;
+ }
+
+ * {
+ padding: 0;
+ margin: 0;
+ }
+
+ body {
+ width: 1057.32px;
+ height: 595.276px;
+ }
+
+ #next {
+ position: absolute;
+ top: 476px;
+ left: 36px;
+ height: 33px;
+ width: 131px;
+ cursor: pointer;
+ }
+
+ #screens > div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 1057.32px;
+ height: 595.276px;
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 500ms;
+ }
+
+ #screens > div.show {
+ transition: opacity 500ms;
+ opacity: 1;
+ pointer-events: auto;
+ }
+
+ #screens > div img {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 1057.32px;
+ height: 595.276px;
+ display: block;
+ }
+
+ #start {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ cursor: pointer;
+ }
+
+ #buttons {
+ position: absolute;
+ top: 469px;
+ left: 359px;
+ }
+
+ [data-a] {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 110px;
+ height: 32px;
+ }
+
+ [data-a].active {
+ background-color: #ccc;
+ mix-blend-mode: multiply;
+ cursor: auto;
+ }
+
+ [data-a].done {
+ background-color: #ccc;
+ mix-blend-mode: hard-light;
+ cursor: auto;
+ }
+
+ [data-t] {
+ position: absolute;
+ cursor: auto;
+ }
+
+ #buttons > div {
+ cursor: pointer;
+ position: absolute;
+ }
+
+ #buttons [data-a="contrast"] {
+ left: 120px;
+ }
+
+ #buttons [data-a="pattern"] {
+ left: 241px;
+ }
+
+ #buttons [data-a="recognition"] {
+ left: 362px;
+ }
+
+ #buttons [data-a="movement"] {
+ left: 483px;
+ }
+
+ #buttons #submit {
+ width: 592px;
+ height: 33px;
+ top: 43px;
+ }
+
+ #score {
+ font-family: f;
+ font-weight: bold;
+ position: absolute;
+ top: 400px;
+ left: 29px;
+ font-size: 44px;
+ color: #000;
+ text-align: center;
+ width: 24px;
+ white-space: nowrap;
+ }
+
+ .m {
+ position: absolute;
+ pointer-events: none;
+ }
+
+ .m img {
+ display: block;
+ width: 114.5px;
+ height: 33px;
+ position: absolute;
+ left: -57px;
+ top: -16.5px;
+ }
+
+ #image.active {
+ cursor: pointer;
+ }
+
+ </style>
+</head>
+<body>
+
+<div id="screens">
+ <div id="screen_1"></div>
+ <div id="screen_2"></div>
+ <div id="screen_3"></div>
+ <div id="screen_4"></div>
+ <div id="screen_5"></div>
+ <div id="screen_6"></div>
+</div>
+<div id="score" data-screens="2,4,6"></div>
+<div id="next" data-screens="2,4,6"></div>
+<div id="buttons">
+ <div data-a="repetition" data-screens="1,3,5"></div>
+ <div data-a="contrast" data-screens="1,3"></div>
+ <div data-a="pattern" data-screens="3,5"></div>
+ <div data-a="recognition" data-screens="1,3,5"></div>
+ <div data-a="movement" data-screens="1,3"></div>
+ <div id="submit" data-screens="1,3,5"></div>
+</div>
+
+<map name="map_1" data-coef="1.008">
+ <area shape="rect" coords="335, 134, 967, 446" href="wrong"/>
+ <area shape="rect" coords="386, 211, 406, 233" href="recognition" />
+ <area shape="rect" coords="510, 223, 528, 244" href="recognition" />
+ <area shape="rect" coords="722, 193, 754, 235" href="recognition" />
+ <area shape="rect" coords="910, 169, 963, 228" href="recognition" />
+ <area shape="rect" coords="770, 222, 872, 252" href="movement" />
+ <area shape="rect" coords="478, 236, 506, 303" href="contrast" />
+ <area shape="rect" coords="414, 234, 449, 310" href="repetition" />
+ <area shape="rect" coords="352, 227, 375, 310" href="repetition" />
+</map>
+
+<map name="map_3" data-coef="1.005">
+
+ <area shape="rect" coords="357, 133, 946, 456" href="wrong"/>
+ <area shape="rect" coords="733, 133, 849, 185" href="movement"/>
+ <area shape="rect" coords="737, 217, 778, 258" href="pattern"/>
+ <area shape="rect" coords="608, 190, 737, 258" href="pattern"/>
+ <area shape="rect" coords="674, 441, 727, 455" href="recognition"/>
+ <area shape="rect" coords="398, 390, 452, 439" href="recognition"/>
+ <area shape="rect" coords="778, 197, 831, 355" href="repetition"/>
+ <area shape="rect" coords="692, 343, 714, 433" href="repetition"/>
+ <area shape="rect" coords="716, 314, 735, 431" href="repetition"/>
+ <area shape="rect" coords="662, 316, 692, 433" href="repetition"/>
+ <area shape="rect" coords="663, 287, 731, 312" href="repetition"/>
+ <area shape="rect" coords="471, 192, 607, 327" href="repetition"/>
+ <area shape="rect" coords="471, 327, 650, 373" href="repetition"/>
+ <area shape="rect" coords="475, 191, 607, 218" href="contrast"/>
+</map>
+<map name="map_5" data-coef="1.005">
+ <area shape="rect" coords="357, 133, 946, 456" href="wrong"/>
+ <area shape="rect" coords="440, 230, 600, 268" href="repetition"/>
+ <area shape="rect" coords="438, 172, 645, 229" href="repetition"/>
+ <area shape="rect" coords="435, 269, 642, 327" href="pattern"/>
+ <area shape="rect" coords="502, 330, 645, 364" href="pattern"/>
+ <area shape="rect" coords="430, 330, 501, 361" href="recognition"/>
+ <area shape="rect" coords="441, 176, 645, 265" href="recognition"/>
+</map>
+
+<div id="start" data-screens="0"></div>
+<!--<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>-->
+<script src="../../../data/jquery.js"></script>
+<script src="visualtriggers.js"></script>
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+$(function () {
+ window.activeScreen = 0;
+ window.answers = {};
+
+ $(document).on('click', "#submit,#next,#start", function () {
+ if (window.activeScreen == 6) {
+ parent.fluidbook.goNextPage();
+ } else {
+ setActiveScreen(window.activeScreen + 1);
+ }
+ return false
+ });
+
+ $(document).on('click', "[data-a]:not(.active,.done)", function () {
+ $('[data-a].active').removeClass('active');
+ $(this).addClass('active');
+ var a = $(this).data('a');
+ $('[data-t]').hide();
+ $('[data-t="' + a + '"],[data-t="wrong"]').show();
+ return false;
+ });
+
+ $(document).on('click', '[data-t]', function (e) {
+ var aa = $('[data-a].active');
+ if (aa.length === 0) {
+ return false;
+ }
+ if (window.answers[window.activeScreen] === undefined || window.answers[window.activeScreen] === null) {
+ window.answers[window.activeScreen] = {};
+ }
+ var a = aa.data('a');
+ var t = $(this).data('t');
+ window.answers[window.activeScreen][a] = t;
+
+ $('body').append('<div class="m" style="top:' + e.originalEvent.clientY + 'px;left:' + e.originalEvent.clientX + 'px"><img src="bt-' + a + '.png" /></div>');
+
+ aa.addClass('done').removeClass('active');
+ });
+
+
+ for (var i = 1; i <= 6; i++) {
+ $('#screen_' + i).html('<img src="visualtriggers-' + i + '.jpg" />');
+ var map = $('map[name="map_' + i + '"]');
+ if (map.length === 0) {
+ continue;
+ }
+ var coef = $(map).data('coef');
+ if (coef === null) {
+ coef = 1;
+ }
+ $(map).find('area').each(function () {
+ var a = $('<a data-t="' + $(this).attr('href') + '"></a>');
+ var coords = splitCoords($(this).attr('coords'), coef);
+ $(a).css({top: coords[1], left: coords[0], width: coords[2] - coords[0], height: coords[3] - coords[1]});
+ $("#screen_" + i).append($(a));
+ });
+ }
+
+ setActiveScreen(0)
+});
+
+function splitCoords(c, coef) {
+ if (coef === undefined) {
+ coef = 1;
+ }
+ c = c.replace(/\s,/g, ',');
+ var r = c.split(',');
+ var res = [];
+ for (var i = 0; i < r.length; i++) {
+ res[i] = parseFloat(r[i]) * coef;
+ }
+ return res;
+}
+
+function setActiveScreen(i) {
+ window.activeScreen = i;
+ $('body').attr('data-screen', i);
+ $('[data-screens]').each(function () {
+ if ($(this).data('screens').toString().split(',').indexOf(i.toString()) >= 0) {
+ $(this).show();
+ } else {
+ $(this).hide();
+ }
+ });
+ setTimeout(function () {
+ $('#screens > div:not(#screen_' + i + ')').removeClass('show');
+ }, 300)
+ $("#screen_" + i).addClass('show');
+ $(".m").remove();
+ $(".done,.active").removeClass('active').removeClass('done');
+ updateScore();
+}
+
+function updateScore() {
+ var s = 0;
+ $.each(window.answers, function (k, v) {
+ var ok = true;
+ $.each(v, function (kk, vv) {
+ if (vv === 'wrong') {
+ ok = false;
+ }
+ });
+ if (ok) {
+ s++;
+ }
+ });
+
+ $("#score").text(s + "/3");
+}
\ No newline at end of file
projects / Animations.git / commitdiff
