{"id":75,"date":"2024-04-01T12:16:23","date_gmt":"2024-04-01T12:16:23","guid":{"rendered":"https:\/\/itsiller-software.com\/?page_id=75"},"modified":"2024-05-09T16:07:51","modified_gmt":"2024-05-09T15:07:51","slug":"2-2","status":"publish","type":"page","link":"https:\/\/itsiller-software.com\/index.php\/2-2\/","title":{"rendered":"Puzzle"},"content":{"rendered":"<div>\n<p>    <button class=\"uk-button uk-button-danger uk-button-small\" onclick=\"toggleFilter()\">Filter<\/button><br \/>\n<button class=\"uk-button uk-button-primary uk-button-small\" onclick=\"showAllRows()\">Show All<\/button><\/p>\n<\/div>\n<div>\n<div class=\"filter-block\" style=\"display: table; width: 100%;\">\n<table class=\"uk-table uk-table-hover uk-table-small \">\n<table class=\"uk-table uk-table-hover uk-table-middle  uk-table-divider\">\n<thead>\n<tr>\n<th class=\"uk-table-shrink\"><\/th>\n<th class=\"uk-table-shrink\"><\/th>\n<th class=\"uk-table-expand uk-text-success\">1. <\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><span style=\"font-size: 13pt;\"><em>1<\/em><\/span><\/td>\n<td>\n<div class=\"checkbox-block\" data-checkbox-id=\"1\" style=\"text-align: left;\"><input class=\"uk-checkbox filter-checkbox\" type=\"checkbox\" id=\"checkbox-1\" \/><\/div>\n<\/td>\n<td>\n<div class=\"sentence\" id=\"sentence1\" data-words=\"Does,this,train,go,to,Brighton?\" data-correct-sequence=\"Does,this,train,go,to,Brighton?\"><\/div>\n<ul class=\"word-list\" id=\"word-list1\"><\/ul>\n<div class=\"result\" id=\"result1\"><\/div>\n<\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-size: 13pt;\"><em>2<\/em><\/span><\/td>\n<td>\n<div class=\"checkbox-block\" data-checkbox-id=\"2\" style=\"text-align: left;\"><input class=\"uk-checkbox filter-checkbox\" type=\"checkbox\" id=\"checkbox-2\" \/><\/div>\n<\/td>\n<td>\n<div class=\"sentence\" id=\"sentence2\" data-words=\"This,is,another,example,sentence\" data-correct-sequence=\"This,is,another,example,sentence\"><\/div>\n<ul class=\"word-list\" id=\"word-list2\"><\/ul>\n<div class=\"result\" id=\"result2\"><\/div>\n<\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-size: 13pt;\"><em>3<\/em><\/span><\/td>\n<td>\n<div class=\"checkbox-block\" data-checkbox-id=\"3\" style=\"text-align: left;\"><input class=\"uk-checkbox filter-checkbox\" type=\"checkbox\" id=\"checkbox-3\" \/><\/div>\n<\/td>\n<td>\n<\/td>\n<\/tr>\n<tr>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<div>\n<p>    <script>\n        document.addEventListener('DOMContentLoaded', function() {\n            \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u043e\u0432 \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b\n            var checkboxBlocks = document.querySelectorAll('.checkbox-block');\n            checkboxBlocks.forEach(function(block) {\n                var checkboxId = block.getAttribute('data-checkbox-id');\n                var checkboxState = localStorage.getItem('checkbox' + checkboxId + 'State') === 'true';\n                var checkbox = block.querySelector('input[type=\"checkbox\"]');\n                if (checkbox) {\n                    checkbox.checked = checkboxState;\n                    checkbox.addEventListener('change', function(event) {\n                        var isChecked = event.target.checked;\n                        \/\/ \u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u0430 \u0432 localStorage\n                        localStorage.setItem('checkbox' + checkboxId + 'State', isChecked);\n                    });\n                }\n            });\n        });\n    <\/script>\n<\/div>\n<div>\n<p>    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/uikit@3.12.0\/dist\/js\/uikit.min.js\"><\/script><br \/>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/uikit@3.12.0\/dist\/js\/uikit-icons.min.js\"><\/script><br \/>\n<script>\n    function toggleFilter() {\n        var checkboxes = document.querySelectorAll('.filter-checkbox');<\/p>\n<p>        checkboxes.forEach(function (checkbox) {\n            var filterBlock = checkbox.closest('tr');<\/p>\n<p>            if (checkbox.checked) {\n                filterBlock.style.display = 'none';\n            } else {\n                filterBlock.style.display = 'table-row';\n            }\n        });\n    }<\/p>\n<p>    function showAllRows() {\n        var rows = document.querySelectorAll('.filter-block table tbody tr');<\/p>\n<p>        rows.forEach(function (row) {\n            row.style.display = 'table-row';\n        });\n    }\n<\/script><\/p>\n<\/div>\n<div>\n<style>\n<p>   .sentence, .word-list, .result {\n  font-family: 'Raleway', sans-serif;\n  font-size: 12pt;\n} \n  .word-list {\n    margin-bottom: -10px;\n    position: relative; \/* \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0441\u043b\u043e\u0432 *\/\n}<\/p>\n<p>.word-list .selected {\n    position: absolute; \/* \u041f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u0435\u043c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0435 \u0441\u043b\u043e\u0432\u0430 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e *\/\n    top: 100%; \/* \u0420\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u043c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0435 \u0441\u043b\u043e\u0432\u0430 \u043f\u043e\u0434 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c \u0441\u043b\u043e\u0432 *\/\n    left: 0px; \/* \u0412\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u043c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0435 \u0441\u043b\u043e\u0432\u0430 \u043f\u043e \u043b\u0435\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e *\/\n    display: none; \/* \u0421\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0435 \u0441\u043b\u043e\u0432\u0430 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e *\/<\/p>\n<p>} <\/p>\n<p>  .sentence {<\/p>\n<p>    margin-bottom: -25px;\n  }\n  .word-list {\n    margin-bottom:0px;\n  }\n  .word-list li {\n    cursor: pointer;\n    display: inline-block;\n    margin-right: 10px;\n  }\n  .word-list li.selected {\n    color: #7886bc;\n}\n  }\n  .result {\n    margin-bottom: 0px;\n  }\n  .correct {\n    color: green;\n  }\n  .incorrect {\n    color: red;\n  }\n<\/style>\n<\/div>\n<div><script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script><br \/>\n<script>\n$(document).ready(function() {\n  \/\/ \u0418\u0442\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u0441\u044f \u043f\u043e \u0432\u0441\u0435\u043c \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c\n  $('.sentence').each(function(index) {\n    var sentenceId = index + 1;\n    var words = $(this).attr('data-words').split(',');\n    var correctSequence = $(this).attr('data-correct-sequence').split(',');\n    var shuffledWords = shuffle(words);<\/p>\n<p>    \/\/ \u0413\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u043b\u043e\u0432 \u0434\u043b\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u044f\n    shuffledWords.forEach(function(word) {\n      $('#word-list' + sentenceId).append('<\/p>\n<li>' + word + '<\/li>\n<p>');\n    });<\/p>\n<p>    var sentence = [];<\/p>\n<p>    $('.word-list#word-list' + sentenceId + ' li').click(function() {\n  var word = $(this).text();\n  var sentenceElement = '#sentence' + sentenceId;\n  var resultListElement = '#result' + sentenceId;<\/p>\n<p>  if (!sentence.includes(word)) {\n    sentence.push(word);\n    $(sentenceElement).text(sentence.join(' '));\n    $(this).addClass('selected');\n    checkSequence(sentence, correctSequence, resultListElement);\n  } else {\n    var index = sentence.indexOf(word);\n    sentence.splice(index, 1);\n    $(this).removeClass('selected'); \/\/ \u0423\u0434\u0430\u043b\u044f\u0435\u043c \u043a\u043b\u0430\u0441\u0441 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\n    checkSequence(sentence, correctSequence, resultListElement);\n  }\n});<\/p>\n<p>    $('.sentence#sentence' + sentenceId).click(function() {\n    var word = $(this).text().split(' ').pop();\n    var index = sentence.indexOf(word);\n    var wordListElement = '.word-list#word-list' + sentenceId;\n    var resultListElement = '#result' + sentenceId;<\/p>\n<p>    if (index !== -1) {\n        sentence.splice(index, 1);\n        $(this).text(sentence.join(' '));\n        $(wordListElement + ' li:contains(' + word + ')').removeClass('selected'); \/\/ \u0423\u0434\u0430\u043b\u044f\u0435\u043c \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0443 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430\n        checkSequence(sentence, correctSequence, resultListElement);\n    }\n});\n  });<\/p>\n<p>  function checkSequence(sentence, correctSequence, resultListElement) {\n    var currentSequence = sentence;\n    var isCorrect = true;<\/p>\n<p>    if (currentSequence.length !== correctSequence.length) {\n      isCorrect = false;\n    } else {\n      for (var i = 0; i < currentSequence.length; i++) {\n        if (currentSequence[i] !== correctSequence[i]) {\n          isCorrect = false;\n          break;\n        }\n      }\n    }\n    \n    if (isCorrect) {\n      $(resultListElement).text('correct').removeClass('incorrect').addClass('correct');\n    } else {\n      $(resultListElement).text('incorrect').removeClass('correct').addClass('incorrect');\n    }\n  }\n  \n  \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u044f \u043c\u0430\u0441\u0441\u0438\u0432\u0430\n  function shuffle(array) {\n    var currentIndex = array.length, randomIndex;\n\n    while (currentIndex != 0) {\n      randomIndex = Math.floor(Math.random() * currentIndex);\n      currentIndex--;\n\n      [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];\n    }\n\n    return array;\n  }\n});\n<\/script><\/div>\n<p><!--more--><br \/>\n<!-- {\"type\":\"layout\",\"children\":[{\"type\":\"section\",\"props\":{\"image_position\":\"center-center\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"default\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"<button class=\\\"uk-button uk-button-danger uk-button-small\\\" onclick=\\\"toggleFilter()\\\">Filter<\\\/button>\\n<button class=\\\"uk-button uk-button-primary uk-button-small\\\" onclick=\\\"showAllRows()\\\">Show All<\\\/button>\\n\\n\"},\"name\":\"button Filter\"},{\"type\":\"text\",\"props\":{\"column_breakpoint\":\"m\",\"content\":\"\\n\n\n<div class=\\\"filter-block\\\" style=\\\"display: table; width: 100%;\\\">\\n\n\n<table class=\\\"uk-table uk-table-hover uk-table-small \\\">\\n\n\n<table class=\\\"uk-table uk-table-hover uk-table-middle  uk-table-divider\\\">\\n\n\n<thead>\\n\n\n<tr>\\n\n\n<th class=\\\"uk-table-shrink\\\"><\\\/th>\\n\n\n<th class=\\\"uk-table-shrink\\\"><\\\/th>\\n\n\n<th class=\\\"uk-table-expand uk-text-success\\\">1. <\\\/th>\\n<\\\/tr>\\n<\\\/thead>\\n\n\n<tbody>\\n\n\n<tr>\\n\n\n<td><span style=\\\"font-size: 13pt;\\\"><em>1<\\\/em><\\\/span><\\\/td>\\n\n\n<td>\\n\n\n<div class=\\\"checkbox-block\\\" data-checkbox-id=\\\"1\\\" style=\\\"text-align: left;\\\"><input class=\\\"uk-checkbox filter-checkbox\\\" type=\\\"checkbox\\\" id=\\\"checkbox-1\\\" \\\/><\\\/div>\\n<\\\/td>\\n\n\n<td>\\n\n\n<div class=\\\"sentence\\\" id=\\\"sentence1\\\" data-words=\\\"Does,this,train,go,to,Brighton?\\\" data-correct-sequence=\\\"Does,this,train,go,to,Brighton?\\\"><\\\/div>\\n\n\n<ul class=\\\"word-list\\\" id=\\\"word-list1\\\"><\\\/ul>\\n\n\n<div class=\\\"result\\\" id=\\\"result1\\\"><\\\/div>\\n<\\\/td>\\n<\\\/tr>\\n\n\n<tr>\\n\n\n<td><span style=\\\"font-size: 13pt;\\\"><em>2<\\\/em><\\\/span><\\\/td>\\n\n\n<td>\\n\n\n<div class=\\\"checkbox-block\\\" data-checkbox-id=\\\"2\\\" style=\\\"text-align: left;\\\"><input class=\\\"uk-checkbox filter-checkbox\\\" type=\\\"checkbox\\\" id=\\\"checkbox-2\\\" \\\/><\\\/div>\\n<\\\/td>\\n\n\n<td>\\n \n\n<div class=\\\"sentence\\\" id=\\\"sentence2\\\" data-words=\\\"This,is,another,example,sentence\\\" data-correct-sequence=\\\"This,is,another,example,sentence\\\"><\\\/div>\\n\n\n<ul class=\\\"word-list\\\" id=\\\"word-list2\\\"><\\\/ul>\\n\n\n<div class=\\\"result\\\" id=\\\"result2\\\"><\\\/div>   \\n<\\\/td>\\n<\\\/tr>\\n\n\n<tr>\\n\n\n<td><span style=\\\"font-size: 13pt;\\\"><em>3<\\\/em><\\\/span><\\\/td>\\n\n\n<td>\\n\n\n<div class=\\\"checkbox-block\\\" data-checkbox-id=\\\"3\\\" style=\\\"text-align: left;\\\"><input class=\\\"uk-checkbox filter-checkbox\\\" type=\\\"checkbox\\\" id=\\\"checkbox-3\\\" \\\/><\\\/div>\\n<\\\/td>\\n\n\n<td>\\n\\n<\\\/td>\\n<\\\/tr>\\n\n\n<tr>\\n<\\\/tr>\\n<\\\/tbody>\\n<\\\/table>\",\"margin\":\"default\"}}]}]}],\"name\":\"TEXT\"},{\"type\":\"section\",\"props\":{\"image_position\":\"center-center\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"default\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"<script>\\n        document.addEventListener('DOMContentLoaded', function() {\\n            \\\/\\\/ \\u0423\\u0441\\u0442\\u0430\\u043d\\u0430\\u0432\\u043b\\u0438\\u0432\\u0430\\u0435\\u043c \\u0441\\u043e\\u0441\\u0442\\u043e\\u044f\\u043d\\u0438\\u044f \\u0447\\u0435\\u043a\\u0431\\u043e\\u043a\\u0441\\u043e\\u0432 \\u043f\\u043e\\u0441\\u043b\\u0435 \\u043f\\u0435\\u0440\\u0435\\u0437\\u0430\\u0433\\u0440\\u0443\\u0437\\u043a\\u0438 \\u0441\\u0442\\u0440\\u0430\\u043d\\u0438\\u0446\\u044b\\n            var checkboxBlocks = document.querySelectorAll('.checkbox-block');\\n            checkboxBlocks.forEach(function(block) {\\n                var checkboxId = block.getAttribute('data-checkbox-id');\\n                var checkboxState = localStorage.getItem('checkbox' + checkboxId + 'State') === 'true';\\n                var checkbox = block.querySelector('input[type=\\\"checkbox\\\"]');\\n                if (checkbox) {\\n                    checkbox.checked = checkboxState;\\n                    checkbox.addEventListener('change', function(event) {\\n                        var isChecked = event.target.checked;\\n                        \\\/\\\/ \\u0421\\u043e\\u0445\\u0440\\u0430\\u043d\\u044f\\u0435\\u043c \\u0441\\u043e\\u0441\\u0442\\u043e\\u044f\\u043d\\u0438\\u0435 \\u0447\\u0435\\u043a\\u0431\\u043e\\u043a\\u0441\\u0430 \\u0432 localStorage\\n                        localStorage.setItem('checkbox' + checkboxId + 'State', isChecked);\\n                    });\\n                }\\n            });\\n        });\\n    <\\\/script>\"},\"name\":\"Script checkbox\"}]}]}]},{\"type\":\"section\",\"props\":{\"image_position\":\"center-center\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"default\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"<script src=\\\"https:\\\/\\\/cdn.jsdelivr.net\\\/npm\\\/uikit@3.12.0\\\/dist\\\/js\\\/uikit.min.js\\\"><\\\/script>\\n<script src=\\\"https:\\\/\\\/cdn.jsdelivr.net\\\/npm\\\/uikit@3.12.0\\\/dist\\\/js\\\/uikit-icons.min.js\\\"><\\\/script>\\n<script>\\n    function toggleFilter() {\\n        var checkboxes = document.querySelectorAll('.filter-checkbox');\\n\\n        checkboxes.forEach(function (checkbox) {\\n            var filterBlock = checkbox.closest('tr');\\n\\n            if (checkbox.checked) {\\n                filterBlock.style.display = 'none';\\n            } else {\\n                filterBlock.style.display = 'table-row';\\n            }\\n        });\\n    }\\n\\n    function showAllRows() {\\n        var rows = document.querySelectorAll('.filter-block table tbody tr');\\n\\n        rows.forEach(function (row) {\\n            row.style.display = 'table-row';\\n        });\\n    }\\n<\\\/script>\\n\"},\"name\":\"script FILTER table\"}]}]}]},{\"type\":\"section\",\"props\":{\"image_position\":\"center-center\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"default\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"text\",\"props\":{\"column_breakpoint\":\"m\",\"content\":\"\n\n<style> \\n \\n   .sentence, .word-list, .result {\\n  font-family: 'Raleway', sans-serif;\\n  font-size: 12pt;\\n} \\n  .word-list {\\n    margin-bottom: -10px;\\n    position: relative; \\\/* \\u0414\\u043e\\u0431\\u0430\\u0432\\u043b\\u044f\\u0435\\u043c \\u043f\\u043e\\u0437\\u0438\\u0446\\u0438\\u043e\\u043d\\u0438\\u0440\\u043e\\u0432\\u0430\\u043d\\u0438\\u0435 \\u0434\\u043b\\u044f \\u043a\\u043e\\u043d\\u0442\\u0435\\u0439\\u043d\\u0435\\u0440\\u0430 \\u0441\\u043b\\u043e\\u0432 *\\\/\\n}\\n\\n.word-list .selected {\\n    position: absolute; \\\/* \\u041f\\u043e\\u0437\\u0438\\u0446\\u0438\\u043e\\u043d\\u0438\\u0440\\u0443\\u0435\\u043c \\u0432\\u044b\\u0431\\u0440\\u0430\\u043d\\u043d\\u044b\\u0435 \\u0441\\u043b\\u043e\\u0432\\u0430 \\u0430\\u0431\\u0441\\u043e\\u043b\\u044e\\u0442\\u043d\\u043e *\\\/\\n    top: 100%; \\\/* \\u0420\\u0430\\u0437\\u043c\\u0435\\u0449\\u0430\\u0435\\u043c \\u0432\\u044b\\u0431\\u0440\\u0430\\u043d\\u043d\\u044b\\u0435 \\u0441\\u043b\\u043e\\u0432\\u0430 \\u043f\\u043e\\u0434 \\u043a\\u043e\\u043d\\u0442\\u0435\\u0439\\u043d\\u0435\\u0440\\u043e\\u043c \\u0441\\u043b\\u043e\\u0432 *\\\/\\n    left: 0px; \\\/* \\u0412\\u044b\\u0440\\u0430\\u0432\\u043d\\u0438\\u0432\\u0430\\u0435\\u043c \\u0432\\u044b\\u0431\\u0440\\u0430\\u043d\\u043d\\u044b\\u0435 \\u0441\\u043b\\u043e\\u0432\\u0430 \\u043f\\u043e \\u043b\\u0435\\u0432\\u043e\\u043c\\u0443 \\u043a\\u0440\\u0430\\u044e *\\\/\\n    display: none; \\\/* \\u0421\\u043a\\u0440\\u044b\\u0432\\u0430\\u0435\\u043c \\u0432\\u044b\\u0431\\u0440\\u0430\\u043d\\u043d\\u044b\\u0435 \\u0441\\u043b\\u043e\\u0432\\u0430 \\u0438\\u0437\\u043d\\u0430\\u0447\\u0430\\u043b\\u044c\\u043d\\u043e *\\\/\\n   \\n} \\n    \\n\\n    \\n  .sentence {\\n     \\n    margin-bottom: -25px;\\n  }\\n  .word-list {\\n    margin-bottom:0px;\\n  }\\n  .word-list li {\\n    cursor: pointer;\\n    display: inline-block;\\n    margin-right: 10px;\\n  }\\n  .word-list li.selected {\\n    color: #7886bc;\\n}\\n  }\\n  .result {\\n    margin-bottom: 0px;\\n  }\\n  .correct {\\n    color: green;\\n  }\\n  .incorrect {\\n    color: red;\\n  }\\n<\\\/style>\",\"margin\":\"default\"},\"name\":\"\\u0441\\u0442\\u0438\\u043b\\u044c \\u0434\\u043b\\u044f \\u0432\\u044b\\u0431\\u043e\\u0440\\u0430 \\u0441\\u043b\\u043e\\u0432\"}]}]}]},{\"type\":\"section\",\"props\":{\"image_position\":\"center-center\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"default\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"text\",\"props\":{\"column_breakpoint\":\"m\",\"content\":\"<script src=\\\"https:\\\/\\\/code.jquery.com\\\/jquery-3.6.0.min.js\\\"><\\\/script>\\n<script>\\n$(document).ready(function() {\\n  \\\/\\\/ \\u0418\\u0442\\u0435\\u0440\\u0438\\u0440\\u0443\\u0435\\u043c\\u0441\\u044f \\u043f\\u043e \\u0432\\u0441\\u0435\\u043c \\u043f\\u0440\\u0435\\u0434\\u043b\\u043e\\u0436\\u0435\\u043d\\u0438\\u044f\\u043c\\n  $('.sentence').each(function(index) {\\n    var sentenceId = index + 1;\\n    var words = $(this).attr('data-words').split(',');\\n    var correctSequence = $(this).attr('data-correct-sequence').split(',');\\n    var shuffledWords = shuffle(words);\\n    \\n    \\\/\\\/ \\u0413\\u0435\\u043d\\u0435\\u0440\\u0438\\u0440\\u0443\\u0435\\u043c \\u0441\\u043b\\u0443\\u0447\\u0430\\u0439\\u043d\\u044b\\u0439 \\u0441\\u043f\\u0438\\u0441\\u043e\\u043a \\u0441\\u043b\\u043e\\u0432 \\u0434\\u043b\\u044f \\u0442\\u0435\\u043a\\u0443\\u0449\\u0435\\u0433\\u043e \\u043f\\u0440\\u0435\\u0434\\u043b\\u043e\\u0436\\u0435\\u043d\\u0438\\u044f\\n    shuffledWords.forEach(function(word) {\\n      $('#word-list' + sentenceId).append('\n\n<li>' + word + '<\\\/li>');\\n    });\\n    \\n    var sentence = [];\\n    \\n    $('.word-list#word-list' + sentenceId + ' li').click(function() {\\n  var word = $(this).text();\\n  var sentenceElement = '#sentence' + sentenceId;\\n  var resultListElement = '#result' + sentenceId;\\n\\n  if (!sentence.includes(word)) {\\n    sentence.push(word);\\n    $(sentenceElement).text(sentence.join(' '));\\n    $(this).addClass('selected');\\n    checkSequence(sentence, correctSequence, resultListElement);\\n  } else {\\n    var index = sentence.indexOf(word);\\n    sentence.splice(index, 1);\\n    $(this).removeClass('selected'); \\\/\\\/ \\u0423\\u0434\\u0430\\u043b\\u044f\\u0435\\u043c \\u043a\\u043b\\u0430\\u0441\\u0441 \\u0442\\u043e\\u043b\\u044c\\u043a\\u043e \\u0434\\u043b\\u044f \\u0442\\u0435\\u043a\\u0443\\u0449\\u0435\\u0433\\u043e \\u044d\\u043b\\u0435\\u043c\\u0435\\u043d\\u0442\\u0430\\n    checkSequence(sentence, correctSequence, resultListElement);\\n  }\\n});\\n    \\n    $('.sentence#sentence' + sentenceId).click(function() {\\n    var word = $(this).text().split(' ').pop();\\n    var index = sentence.indexOf(word);\\n    var wordListElement = '.word-list#word-list' + sentenceId;\\n    var resultListElement = '#result' + sentenceId;\\n\\n    if (index !== -1) {\\n        sentence.splice(index, 1);\\n        $(this).text(sentence.join(' '));\\n        $(wordListElement + ' li:contains(' + word + ')').removeClass('selected'); \\\/\\\/ \\u0423\\u0434\\u0430\\u043b\\u044f\\u0435\\u043c \\u043f\\u043e\\u0434\\u0441\\u0432\\u0435\\u0442\\u043a\\u0443 \\u0442\\u043e\\u043b\\u044c\\u043a\\u043e \\u0434\\u043b\\u044f \\u0443\\u0434\\u0430\\u043b\\u0435\\u043d\\u043d\\u043e\\u0433\\u043e \\u0441\\u043b\\u043e\\u0432\\u0430\\n        checkSequence(sentence, correctSequence, resultListElement);\\n    }\\n});\\n  });\\n  \\n  function checkSequence(sentence, correctSequence, resultListElement) {\\n    var currentSequence = sentence;\\n    var isCorrect = true;\\n    \\n    if (currentSequence.length !== correctSequence.length) {\\n      isCorrect = false;\\n    } else {\\n      for (var i = 0; i < currentSequence.length; i++) {\\n        if (currentSequence[i] !== correctSequence[i]) {\\n          isCorrect = false;\\n          break;\\n        }\\n      }\\n    }\\n    \\n    if (isCorrect) {\\n      $(resultListElement).text('correct').removeClass('incorrect').addClass('correct');\\n    } else {\\n      $(resultListElement).text('incorrect').removeClass('correct').addClass('incorrect');\\n    }\\n  }\\n  \\n  \\\/\\\/ \\u0424\\u0443\\u043d\\u043a\\u0446\\u0438\\u044f \\u0434\\u043b\\u044f \\u043f\\u0435\\u0440\\u0435\\u043c\\u0435\\u0448\\u0438\\u0432\\u0430\\u043d\\u0438\\u044f \\u043c\\u0430\\u0441\\u0441\\u0438\\u0432\\u0430\\n  function shuffle(array) {\\n    var currentIndex = array.length, randomIndex;\\n\\n    while (currentIndex != 0) {\\n      randomIndex = Math.floor(Math.random() * currentIndex);\\n      currentIndex--;\\n\\n      [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];\\n    }\\n\\n    return array;\\n  }\\n});\\n<\\\/script>\",\"margin\":\"default\"},\"name\":\"\\u0421\\u043a\\u0440\\u0438\\u043f\\u0442 \\u0434\\u043b\\u044f \\u0432\\u044b\\u0431\\u043e\\u0440\\u0430 \\u0441\\u043b\\u043e\\u0432\"}]}]}]}],\"version\":\"4.3.8\"} --><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Filter Show All 1. 1 2 3<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-75","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/itsiller-software.com\/index.php\/wp-json\/wp\/v2\/pages\/75","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itsiller-software.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/itsiller-software.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/itsiller-software.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/itsiller-software.com\/index.php\/wp-json\/wp\/v2\/comments?post=75"}],"version-history":[{"count":83,"href":"https:\/\/itsiller-software.com\/index.php\/wp-json\/wp\/v2\/pages\/75\/revisions"}],"predecessor-version":[{"id":1681,"href":"https:\/\/itsiller-software.com\/index.php\/wp-json\/wp\/v2\/pages\/75\/revisions\/1681"}],"wp:attachment":[{"href":"https:\/\/itsiller-software.com\/index.php\/wp-json\/wp\/v2\/media?parent=75"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}