new file: .gitignore
new file: index.js new file: package-lock.json new file: package.json new file: public/lib/functions.js new file: public/lib/html2canvas.js new file: public/lib/inter.js new file: public/lib/inter_temp.js new file: public/lib/interact.js new file: public/lib/interact.js.map new file: public/lib/jquery.cookie.js new file: public/lib/jquery.js new file: server.js new file: views/condition/lvl-1.ejs new file: views/condition/lvl-2.ejs new file: views/condition/lvl-3.ejs new file: views/condition/lvl-4.ejs new file: views/condition/lvl-5.ejs new file: views/consecution/lvl-1.ejs new file: views/consecution/lvl-2.ejs new file: views/consecution/lvl-3.ejs new file: views/consecution/lvl-4.ejs new file: views/consecution/lvl-5.ejs new file: views/looping/lvl-1.ejs new file: views/looping/lvl-2.ejs new file: views/looping/lvl-3.ejs new file: views/looping/lvl-4.ejs new file: views/looping/lvl-5.ejs new file: views/lvls/lvls_1.ejs new file: views/lvls/lvls_2.ejs new file: views/main.ejs new file: views/old/condition/lvl-1.ejs new file: views/old/condition/lvl-2.ejs new file: views/old/condition/lvl-3.ejs new file: views/old/condition/lvl-4.ejs new file: views/old/condition/lvl-5.ejs new file: views/old/consecution/lvl-1.ejs new file: views/old/consecution/lvl-2.ejs new file: views/old/consecution/lvl-3.ejs new file: views/old/consecution/lvl-4.ejs new file: views/old/consecution/lvl-5.ejs new file: views/old/looping/lvl-1.ejs new file: views/old/looping/lvl-2.ejs new file: views/old/looping/lvl-3.ejs new file: views/old/looping/lvl-4.ejs new file: views/old/looping/lvl-5.ejs new file: views/static/404.ejs new file: views/static/end.ejs new file: views/static/header.ejs new file: views/static/start.ejs
This commit is contained in:
312
views/old/condition/lvl-1.ejs
Executable file
312
views/old/condition/lvl-1.ejs
Executable file
@ -0,0 +1,312 @@
|
||||
<%- include('../static/start.ejs') %>
|
||||
<style>
|
||||
.dropzone {
|
||||
background-color: #bfe4ff;
|
||||
border: dashed 4px transparent;
|
||||
border-radius: 4px;
|
||||
/* margin: 10px auto 10px; */
|
||||
/* padding: 10px; */
|
||||
padding: 5px;
|
||||
width: 50vw;
|
||||
min-height: 50px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.drop-active {
|
||||
border-color: #aaa;
|
||||
}
|
||||
|
||||
.drop-target {
|
||||
background-color: #29e;
|
||||
border-color: #fff;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.drag-drop {
|
||||
/* display: inline-block; */
|
||||
min-width: 40px;
|
||||
/* height: 15px; */
|
||||
padding: 5px;
|
||||
|
||||
/* padding: 2em 0.5em; */
|
||||
/* margin: 1rem 0 0 1rem; */
|
||||
|
||||
color: #fff;
|
||||
background-color: #29e;
|
||||
border: solid 2px #fff;
|
||||
|
||||
touch-action: none;
|
||||
transform: translate(0px, 0px);
|
||||
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.drag-drop.can-drop {
|
||||
color: #000;
|
||||
background-color: #4e4;
|
||||
}
|
||||
.code_vars li{
|
||||
/* display: inline-table; */
|
||||
width: max-content;
|
||||
max-width: 280px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<%
|
||||
task = 'Составить программу, которая спрашивает возраст человека и, если ему 18 лет и больше, сообщает “Замечательно. Вы уже можете водить автомобиль”, а в противном случае – “К сожалению, водить автомобиль Вам рановато”';
|
||||
code ="let age = prompt('Укажите ваш возраст'); /%"+
|
||||
"if (age >= '18') _% { /%"+
|
||||
"return 'Замечательно. Вы уже можете водить автомобиль'; _% } /%"+
|
||||
"else _% { /%"+
|
||||
"return 'К сожалению, водить автомобиль Вам рановато'; _% }"
|
||||
%>
|
||||
|
||||
<%- include('../static/header.ejs') %>
|
||||
<section class="main">
|
||||
<div class="main-top" style="display: flex;">
|
||||
<div class="code_space" style="width: 100vw;"></div>
|
||||
<ul class="code_vars" style="border: 1px #29e solid;max-width: 300px; display: block;width: -webkit-fill-available;"></ul>
|
||||
</div>
|
||||
<div class="main-bottom" style="display: block;margin-top: 20px;">
|
||||
<div class="task" style="margin-bottom: 20px;"><b>Задача: </b> <%= task %></div>
|
||||
<div style="display: flex; justify-content: space-around;">
|
||||
<button class="check_btn" onclick="check_task()">проверить</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
// function get_lvl(callback){
|
||||
// fetch("/lvls/<%=theme%>/<%=lvl%>.txt")
|
||||
// .then((response) => {
|
||||
// return response.text();
|
||||
// })
|
||||
// .then((data) => {
|
||||
// callback(data);
|
||||
// })
|
||||
// }
|
||||
|
||||
function check_next() {
|
||||
$.post("/check/<%= theme %>/<%= lvl %>")
|
||||
.done(function( res ) {
|
||||
console.log(res["body"]);
|
||||
if(res["body"] == true){
|
||||
if("<%=lvl%>" != 5){
|
||||
let next_btn = document.createElement("button")
|
||||
next_btn.setAttribute("onclick",`goto('/<%= theme %>/<%= parseInt(lvl)+1 %>')`);
|
||||
next_btn.innerText = "следующий уровень";
|
||||
document.getElementsByClassName("header_btn3")[0].appendChild(next_btn);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
check_next()
|
||||
let answer = {};
|
||||
let code = [];
|
||||
show_task();
|
||||
|
||||
function show_task() {
|
||||
code = "<%-code%>".split("/%");
|
||||
Object.entries(code).forEach(([key,value]) => {
|
||||
code[key] = value.replace("_%","\n");
|
||||
});
|
||||
|
||||
let arr = [];
|
||||
Object.entries(code).forEach(([key,value]) => {
|
||||
// console.log(key,value);
|
||||
let new_obj = document.createElement("li");
|
||||
new_obj.id = `ans-${key}`;
|
||||
new_obj.classList.add("drag-drop");
|
||||
new_obj.classList.add("drag");
|
||||
new_obj.innerText = value;
|
||||
|
||||
let ask_obj = document.createElement("div");
|
||||
ask_obj.id = `ask-${key}`;
|
||||
ask_obj.classList.add(`dropzone`);
|
||||
|
||||
arr.push(new_obj);
|
||||
console.log(arr);
|
||||
// document.getElementsByClassName("code_vars")[0].appendChild(new_obj);
|
||||
document.getElementsByClassName("code_space")[0].appendChild(ask_obj);
|
||||
answer[key] = null
|
||||
});
|
||||
|
||||
Object.entries(shuffle_array(arr)).forEach(([key,value]) => {
|
||||
document.getElementsByClassName("code_vars")[0].appendChild(value);
|
||||
});
|
||||
}
|
||||
|
||||
function shuffle_array(array) {
|
||||
var currentIndex = array.length, temporaryValue, randomIndex;
|
||||
|
||||
while (0 !== currentIndex) {
|
||||
|
||||
randomIndex = Math.floor(Math.random() * currentIndex);
|
||||
currentIndex -= 1;
|
||||
|
||||
temporaryValue = array[currentIndex];
|
||||
array[currentIndex] = array[randomIndex];
|
||||
array[randomIndex] = temporaryValue;
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
interact('.main').dropzone({
|
||||
overlap: 0.75,
|
||||
|
||||
ondrop: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
if(drag.parentNode.id.split("-").at(-1) != ""){
|
||||
answer[drag.parentNode.id.split("-").at(-1)] = null
|
||||
}
|
||||
document.getElementsByClassName("code_vars")[0].appendChild(drag)
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
})
|
||||
|
||||
function check_task() {
|
||||
if(!Object.values(answer).includes(null)){
|
||||
let grade = 0;
|
||||
Object.entries(answer).forEach(([key,value]) => {
|
||||
if (value != null && value != "") {
|
||||
document.getElementById(`ans-${value}`).classList.remove("drag");
|
||||
if(key == value){
|
||||
// document.getElementById(`ask-${key}`).style.backgroundColor = "green";
|
||||
grade++;
|
||||
document.getElementById(`ans-${value}`).style.backgroundColor = "green";
|
||||
}else{
|
||||
// document.getElementById(`ask-${key}`).style.backgroundColor = "red";
|
||||
document.getElementById(`ans-${value}`).style.backgroundColor = "red";
|
||||
}
|
||||
}
|
||||
});
|
||||
setTimeout(()=>{
|
||||
if (grade == code.length) {
|
||||
alert("Поздравляю вы прошли уровень");
|
||||
console.log({theme:"<%= theme %>",lvl:"<%= lvl %>"});
|
||||
$.post("/finish/<%= theme %>/<%= lvl %>")
|
||||
.done(function( res ) {
|
||||
document.getElementsByClassName("check_btn")[0].setAttribute("onclick","")
|
||||
if("<%=lvl%>" != 5){
|
||||
let next_btn = document.createElement("button")
|
||||
next_btn.setAttribute("onclick",`goto('/<%= theme %>/<%= parseInt(lvl)+1 %>')`);
|
||||
next_btn.innerText = "следующий уровень";
|
||||
document.getElementsByClassName("header_btn3")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn3")[0].appendChild(next_btn);
|
||||
|
||||
let restart_btn = document.createElement("button")
|
||||
restart_btn.setAttribute("onclick","goto('')");
|
||||
restart_btn.innerText = "перезапустить";
|
||||
document.getElementsByClassName("header_btn2")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn2")[0].appendChild(restart_btn);
|
||||
}
|
||||
else{
|
||||
alert("Поздравляю вы прошли всю тему <%=theme_name%>");
|
||||
}
|
||||
})
|
||||
}
|
||||
else{
|
||||
alert("Вы не правильно выполнили задание");
|
||||
let restart_btn = document.createElement("button")
|
||||
restart_btn.setAttribute("onclick","goto('')");
|
||||
restart_btn.innerText = "перезапустить";
|
||||
document.getElementsByClassName("header_btn2")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn2")[0].appendChild(restart_btn);
|
||||
}
|
||||
},700)
|
||||
}
|
||||
else{
|
||||
alert("Сначала расставьте все строки")
|
||||
}
|
||||
}
|
||||
|
||||
interact('.dropzone').dropzone({
|
||||
overlap: 0.75,
|
||||
|
||||
ondropactivate: function (event) {
|
||||
// add active dropzone feedback
|
||||
event.target.classList.add('drop-active')
|
||||
},
|
||||
ondragenter: function (event) {
|
||||
var drag = event.relatedTarget
|
||||
var zone = event.target
|
||||
|
||||
// feedback the possibility of a drop
|
||||
zone.classList.add('drop-target')
|
||||
},
|
||||
ondragleave: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
// remove the drop feedback style
|
||||
// event.relatedTarget.classList.remove('can-drop')
|
||||
event.target.classList.remove('drop-target')
|
||||
// if(answer[zone.id.split("-").at(-1)] == drag.id.split("-").at(-1)){
|
||||
// answer[zone.id.split("-").at(-1)] = null
|
||||
// }
|
||||
|
||||
},
|
||||
ondrop: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
if (zone.children.length == 0) {
|
||||
zone.appendChild(drag)
|
||||
answer[zone.id.split("-").at(-1)] = drag.id.split("-").at(-1);
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
else{
|
||||
let child = zone.childNodes[0];
|
||||
let parent = drag.parentNode;
|
||||
if(zone.id.split("-").at(-1) != ""){
|
||||
answer[zone.id.split("-").at(-1)] = drag.id.split("-").at(-1);
|
||||
}
|
||||
if(parent.id.split("-").at(-1) != ""){
|
||||
answer[parent.id.split("-").at(-1)] = child.id.split("-").at(-1);
|
||||
}
|
||||
parent.appendChild(child)
|
||||
zone.appendChild(drag)
|
||||
setpos(0,0,child);
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
console.log(answer);
|
||||
|
||||
},
|
||||
ondropdeactivate: function (event) {
|
||||
event.target.classList.remove('drop-active')
|
||||
event.target.classList.remove('drop-target')
|
||||
}
|
||||
})
|
||||
|
||||
function dragMoveListener (event) {
|
||||
var target = event.target
|
||||
var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
|
||||
var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
|
||||
setpos(x,y,target);
|
||||
}
|
||||
|
||||
function setpos(x,y,obj) {
|
||||
obj.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
|
||||
obj.setAttribute('data-x', x)
|
||||
obj.setAttribute('data-y', y)
|
||||
}
|
||||
|
||||
// this function is used later in the resizing and gesture demos
|
||||
window.dragMoveListener = dragMoveListener
|
||||
|
||||
interact('.drag')
|
||||
.draggable({
|
||||
inertia: true,
|
||||
modifiers: [
|
||||
interact.modifiers.restrictRect({
|
||||
// restriction: 'parent',
|
||||
endOnly: true
|
||||
})
|
||||
],
|
||||
autoScroll: false,
|
||||
// dragMoveListener from the dragging demo above
|
||||
listeners: { move: dragMoveListener }
|
||||
})
|
||||
</script>
|
||||
|
||||
<%- include('../static/end.ejs') %>
|
||||
316
views/old/condition/lvl-2.ejs
Executable file
316
views/old/condition/lvl-2.ejs
Executable file
@ -0,0 +1,316 @@
|
||||
<%- include('../static/start.ejs') %>
|
||||
<style>
|
||||
.dropzone {
|
||||
background-color: #bfe4ff;
|
||||
border: dashed 4px transparent;
|
||||
border-radius: 4px;
|
||||
/* margin: 10px auto 10px; */
|
||||
/* padding: 10px; */
|
||||
padding: 5px;
|
||||
width: 50vw;
|
||||
min-height: 50px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.drop-active {
|
||||
border-color: #aaa;
|
||||
}
|
||||
|
||||
.drop-target {
|
||||
background-color: #29e;
|
||||
border-color: #fff;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.drag-drop {
|
||||
/* display: inline-block; */
|
||||
min-width: 40px;
|
||||
/* height: 15px; */
|
||||
padding: 5px;
|
||||
|
||||
/* padding: 2em 0.5em; */
|
||||
/* margin: 1rem 0 0 1rem; */
|
||||
|
||||
color: #fff;
|
||||
background-color: #29e;
|
||||
border: solid 2px #fff;
|
||||
|
||||
touch-action: none;
|
||||
transform: translate(0px, 0px);
|
||||
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.drag-drop.can-drop {
|
||||
color: #000;
|
||||
background-color: #4e4;
|
||||
}
|
||||
.code_vars li{
|
||||
/* display: inline-table; */
|
||||
width: max-content;
|
||||
max-width: 280px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<%
|
||||
task = 'Даны три целых числа, одно из которых отлично от двух других, равных между собой. Определить порядковый номер числа, отличного от остальных.';
|
||||
code ="let num_1 = prompt('первое число'); /%"+
|
||||
"let num_2 = prompt('второе число'); /%"+
|
||||
"let num_3 = prompt('третье число'); /%"+
|
||||
"if (num_1 == num_2) _% { /%"+
|
||||
"return 'число под номером 3 отличного от остальных'; _% } /%"+
|
||||
"else if (num_1 == num_3) _% { /%"+
|
||||
"return 'число под номером 2 отличного от остальных'; _% } /%"+
|
||||
"else { /%"+
|
||||
"return 'число под номером 1 отличного от остальных'; _% }"
|
||||
%>
|
||||
|
||||
<%- include('../static/header.ejs') %>
|
||||
<section class="main">
|
||||
<div class="main-top" style="display: flex;">
|
||||
<div class="code_space" style="width: 100vw;"></div>
|
||||
<ul class="code_vars" style="border: 1px #29e solid;max-width: 300px; display: block;width: -webkit-fill-available;"></ul>
|
||||
</div>
|
||||
<div class="main-bottom" style="display: block;margin-top: 20px;">
|
||||
<div class="task" style="margin-bottom: 20px;"><b>Задача: </b> <%= task %></div>
|
||||
<div style="display: flex; justify-content: space-around;">
|
||||
<button class="check_btn" onclick="check_task()">проверить</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
// function get_lvl(callback){
|
||||
// fetch("/lvls/<%=theme%>/<%=lvl%>.txt")
|
||||
// .then((response) => {
|
||||
// return response.text();
|
||||
// })
|
||||
// .then((data) => {
|
||||
// callback(data);
|
||||
// })
|
||||
// }
|
||||
|
||||
function check_next() {
|
||||
$.post("/check/<%= theme %>/<%= lvl %>")
|
||||
.done(function( res ) {
|
||||
console.log(res["body"]);
|
||||
if(res["body"] == true){
|
||||
if("<%=lvl%>" != 5){
|
||||
let next_btn = document.createElement("button")
|
||||
next_btn.setAttribute("onclick",`goto('/<%= theme %>/<%= parseInt(lvl)+1 %>')`);
|
||||
next_btn.innerText = "следующий уровень";
|
||||
document.getElementsByClassName("header_btn3")[0].appendChild(next_btn);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
check_next()
|
||||
let answer = {};
|
||||
let code = [];
|
||||
show_task();
|
||||
|
||||
function show_task() {
|
||||
code = "<%-code%>".split("/%");
|
||||
Object.entries(code).forEach(([key,value]) => {
|
||||
code[key] = value.replace("_%","\n");
|
||||
});
|
||||
|
||||
let arr = [];
|
||||
Object.entries(code).forEach(([key,value]) => {
|
||||
// console.log(key,value);
|
||||
let new_obj = document.createElement("li");
|
||||
new_obj.id = `ans-${key}`;
|
||||
new_obj.classList.add("drag-drop");
|
||||
new_obj.classList.add("drag");
|
||||
new_obj.innerText = value;
|
||||
|
||||
let ask_obj = document.createElement("div");
|
||||
ask_obj.id = `ask-${key}`;
|
||||
ask_obj.classList.add(`dropzone`);
|
||||
|
||||
arr.push(new_obj);
|
||||
console.log(arr);
|
||||
// document.getElementsByClassName("code_vars")[0].appendChild(new_obj);
|
||||
document.getElementsByClassName("code_space")[0].appendChild(ask_obj);
|
||||
answer[key] = null
|
||||
});
|
||||
|
||||
Object.entries(shuffle_array(arr)).forEach(([key,value]) => {
|
||||
document.getElementsByClassName("code_vars")[0].appendChild(value);
|
||||
});
|
||||
}
|
||||
|
||||
function shuffle_array(array) {
|
||||
var currentIndex = array.length, temporaryValue, randomIndex;
|
||||
|
||||
while (0 !== currentIndex) {
|
||||
|
||||
randomIndex = Math.floor(Math.random() * currentIndex);
|
||||
currentIndex -= 1;
|
||||
|
||||
temporaryValue = array[currentIndex];
|
||||
array[currentIndex] = array[randomIndex];
|
||||
array[randomIndex] = temporaryValue;
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
interact('.main').dropzone({
|
||||
overlap: 0.75,
|
||||
|
||||
ondrop: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
if(drag.parentNode.id.split("-").at(-1) != ""){
|
||||
answer[drag.parentNode.id.split("-").at(-1)] = null
|
||||
}
|
||||
document.getElementsByClassName("code_vars")[0].appendChild(drag)
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
})
|
||||
|
||||
function check_task() {
|
||||
if(!Object.values(answer).includes(null)){
|
||||
let grade = 0;
|
||||
Object.entries(answer).forEach(([key,value]) => {
|
||||
if (value != null && value != "") {
|
||||
document.getElementById(`ans-${value}`).classList.remove("drag");
|
||||
if(key == value){
|
||||
// document.getElementById(`ask-${key}`).style.backgroundColor = "green";
|
||||
grade++;
|
||||
document.getElementById(`ans-${value}`).style.backgroundColor = "green";
|
||||
}else{
|
||||
// document.getElementById(`ask-${key}`).style.backgroundColor = "red";
|
||||
document.getElementById(`ans-${value}`).style.backgroundColor = "red";
|
||||
}
|
||||
}
|
||||
});
|
||||
setTimeout(()=>{
|
||||
if (grade == code.length) {
|
||||
alert("Поздравляю вы прошли уровень");
|
||||
console.log({theme:"<%= theme %>",lvl:"<%= lvl %>"});
|
||||
$.post("/finish/<%= theme %>/<%= lvl %>")
|
||||
.done(function( res ) {
|
||||
document.getElementsByClassName("check_btn")[0].setAttribute("onclick","")
|
||||
if("<%=lvl%>" != 5){
|
||||
let next_btn = document.createElement("button")
|
||||
next_btn.setAttribute("onclick",`goto('/<%= theme %>/<%= parseInt(lvl)+1 %>')`);
|
||||
next_btn.innerText = "следующий уровень";
|
||||
document.getElementsByClassName("header_btn3")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn3")[0].appendChild(next_btn);
|
||||
|
||||
let restart_btn = document.createElement("button")
|
||||
restart_btn.setAttribute("onclick","goto('')");
|
||||
restart_btn.innerText = "перезапустить";
|
||||
document.getElementsByClassName("header_btn2")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn2")[0].appendChild(restart_btn);
|
||||
}
|
||||
else{
|
||||
alert("Поздравляю вы прошли всю тему <%=theme_name%>");
|
||||
}
|
||||
})
|
||||
}
|
||||
else{
|
||||
alert("Вы не правильно выполнили задание");
|
||||
let restart_btn = document.createElement("button")
|
||||
restart_btn.setAttribute("onclick","goto('')");
|
||||
restart_btn.innerText = "перезапустить";
|
||||
document.getElementsByClassName("header_btn2")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn2")[0].appendChild(restart_btn);
|
||||
}
|
||||
},700)
|
||||
}
|
||||
else{
|
||||
alert("Сначала расставьте все строки")
|
||||
}
|
||||
}
|
||||
|
||||
interact('.dropzone').dropzone({
|
||||
overlap: 0.75,
|
||||
|
||||
ondropactivate: function (event) {
|
||||
// add active dropzone feedback
|
||||
event.target.classList.add('drop-active')
|
||||
},
|
||||
ondragenter: function (event) {
|
||||
var drag = event.relatedTarget
|
||||
var zone = event.target
|
||||
|
||||
// feedback the possibility of a drop
|
||||
zone.classList.add('drop-target')
|
||||
},
|
||||
ondragleave: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
// remove the drop feedback style
|
||||
// event.relatedTarget.classList.remove('can-drop')
|
||||
event.target.classList.remove('drop-target')
|
||||
// if(answer[zone.id.split("-").at(-1)] == drag.id.split("-").at(-1)){
|
||||
// answer[zone.id.split("-").at(-1)] = null
|
||||
// }
|
||||
|
||||
},
|
||||
ondrop: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
if (zone.children.length == 0) {
|
||||
zone.appendChild(drag)
|
||||
answer[zone.id.split("-").at(-1)] = drag.id.split("-").at(-1);
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
else{
|
||||
let child = zone.childNodes[0];
|
||||
let parent = drag.parentNode;
|
||||
if(zone.id.split("-").at(-1) != ""){
|
||||
answer[zone.id.split("-").at(-1)] = drag.id.split("-").at(-1);
|
||||
}
|
||||
if(parent.id.split("-").at(-1) != ""){
|
||||
answer[parent.id.split("-").at(-1)] = child.id.split("-").at(-1);
|
||||
}
|
||||
parent.appendChild(child)
|
||||
zone.appendChild(drag)
|
||||
setpos(0,0,child);
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
console.log(answer);
|
||||
|
||||
},
|
||||
ondropdeactivate: function (event) {
|
||||
event.target.classList.remove('drop-active')
|
||||
event.target.classList.remove('drop-target')
|
||||
}
|
||||
})
|
||||
|
||||
function dragMoveListener (event) {
|
||||
var target = event.target
|
||||
var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
|
||||
var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
|
||||
setpos(x,y,target);
|
||||
}
|
||||
|
||||
function setpos(x,y,obj) {
|
||||
obj.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
|
||||
obj.setAttribute('data-x', x)
|
||||
obj.setAttribute('data-y', y)
|
||||
}
|
||||
|
||||
// this function is used later in the resizing and gesture demos
|
||||
window.dragMoveListener = dragMoveListener
|
||||
|
||||
interact('.drag')
|
||||
.draggable({
|
||||
inertia: true,
|
||||
modifiers: [
|
||||
interact.modifiers.restrictRect({
|
||||
// restriction: 'parent',
|
||||
endOnly: true
|
||||
})
|
||||
],
|
||||
autoScroll: false,
|
||||
// dragMoveListener from the dragging demo above
|
||||
listeners: { move: dragMoveListener }
|
||||
})
|
||||
</script>
|
||||
|
||||
<%- include('../static/end.ejs') %>
|
||||
314
views/old/condition/lvl-3.ejs
Executable file
314
views/old/condition/lvl-3.ejs
Executable file
@ -0,0 +1,314 @@
|
||||
<%- include('../static/start.ejs') %>
|
||||
<style>
|
||||
.dropzone {
|
||||
background-color: #bfe4ff;
|
||||
border: dashed 4px transparent;
|
||||
border-radius: 4px;
|
||||
/* margin: 10px auto 10px; */
|
||||
/* padding: 10px; */
|
||||
padding: 5px;
|
||||
width: 50vw;
|
||||
min-height: 50px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.drop-active {
|
||||
border-color: #aaa;
|
||||
}
|
||||
|
||||
.drop-target {
|
||||
background-color: #29e;
|
||||
border-color: #fff;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.drag-drop {
|
||||
/* display: inline-block; */
|
||||
min-width: 40px;
|
||||
/* height: 15px; */
|
||||
padding: 5px;
|
||||
|
||||
/* padding: 2em 0.5em; */
|
||||
/* margin: 1rem 0 0 1rem; */
|
||||
|
||||
color: #fff;
|
||||
background-color: #29e;
|
||||
border: solid 2px #fff;
|
||||
|
||||
touch-action: none;
|
||||
transform: translate(0px, 0px);
|
||||
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.drag-drop.can-drop {
|
||||
color: #000;
|
||||
background-color: #4e4;
|
||||
}
|
||||
.code_vars li{
|
||||
/* display: inline-table; */
|
||||
width: max-content;
|
||||
max-width: 280px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<%
|
||||
task = 'Человек вводит в компьютер число. Если оно находится в интервале от 28 до 30, то нужно напечатать текст ПОПАЛ, если оно больше 30 — то ПЕРЕЛЁТ, если оно меньше 28, то НЕДОЛЁТ.';
|
||||
code ="let int = prompt('Введите число'); /%"+
|
||||
"if (28 <= int <= 30) _% { /%"+
|
||||
"return 'ПОПАЛ'; _% } /%"+
|
||||
"else if (int > 30) _% { /%"+
|
||||
"return 'ПЕРЕЛЁТ'; _% } /%"+
|
||||
"else if (int < 28) _% { /%"+
|
||||
"return 'НЕДОЛЁТ'; _% }"
|
||||
%>
|
||||
|
||||
<%- include('../static/header.ejs') %>
|
||||
<section class="main">
|
||||
<div class="main-top" style="display: flex;">
|
||||
<div class="code_space" style="width: 100vw;"></div>
|
||||
<ul class="code_vars" style="border: 1px #29e solid;max-width: 300px; display: block;width: -webkit-fill-available;"></ul>
|
||||
</div>
|
||||
<div class="main-bottom" style="display: block;margin-top: 20px;">
|
||||
<div class="task" style="margin-bottom: 20px;"><b>Задача: </b> <%= task %></div>
|
||||
<div style="display: flex; justify-content: space-around;">
|
||||
<button class="check_btn" onclick="check_task()">проверить</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
// function get_lvl(callback){
|
||||
// fetch("/lvls/<%=theme%>/<%=lvl%>.txt")
|
||||
// .then((response) => {
|
||||
// return response.text();
|
||||
// })
|
||||
// .then((data) => {
|
||||
// callback(data);
|
||||
// })
|
||||
// }
|
||||
|
||||
function check_next() {
|
||||
$.post("/check/<%= theme %>/<%= lvl %>")
|
||||
.done(function( res ) {
|
||||
console.log(res["body"]);
|
||||
if(res["body"] == true){
|
||||
if("<%=lvl%>" != 5){
|
||||
let next_btn = document.createElement("button")
|
||||
next_btn.setAttribute("onclick",`goto('/<%= theme %>/<%= parseInt(lvl)+1 %>')`);
|
||||
next_btn.innerText = "следующий уровень";
|
||||
document.getElementsByClassName("header_btn3")[0].appendChild(next_btn);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
check_next()
|
||||
let answer = {};
|
||||
let code = [];
|
||||
show_task();
|
||||
|
||||
function show_task() {
|
||||
code = "<%-code%>".split("/%");
|
||||
Object.entries(code).forEach(([key,value]) => {
|
||||
code[key] = value.replace("_%","\n");
|
||||
});
|
||||
|
||||
let arr = [];
|
||||
Object.entries(code).forEach(([key,value]) => {
|
||||
// console.log(key,value);
|
||||
let new_obj = document.createElement("li");
|
||||
new_obj.id = `ans-${key}`;
|
||||
new_obj.classList.add("drag-drop");
|
||||
new_obj.classList.add("drag");
|
||||
new_obj.innerText = value;
|
||||
|
||||
let ask_obj = document.createElement("div");
|
||||
ask_obj.id = `ask-${key}`;
|
||||
ask_obj.classList.add(`dropzone`);
|
||||
|
||||
arr.push(new_obj);
|
||||
console.log(arr);
|
||||
// document.getElementsByClassName("code_vars")[0].appendChild(new_obj);
|
||||
document.getElementsByClassName("code_space")[0].appendChild(ask_obj);
|
||||
answer[key] = null
|
||||
});
|
||||
|
||||
Object.entries(shuffle_array(arr)).forEach(([key,value]) => {
|
||||
document.getElementsByClassName("code_vars")[0].appendChild(value);
|
||||
});
|
||||
}
|
||||
|
||||
function shuffle_array(array) {
|
||||
var currentIndex = array.length, temporaryValue, randomIndex;
|
||||
|
||||
while (0 !== currentIndex) {
|
||||
|
||||
randomIndex = Math.floor(Math.random() * currentIndex);
|
||||
currentIndex -= 1;
|
||||
|
||||
temporaryValue = array[currentIndex];
|
||||
array[currentIndex] = array[randomIndex];
|
||||
array[randomIndex] = temporaryValue;
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
interact('.main').dropzone({
|
||||
overlap: 0.75,
|
||||
|
||||
ondrop: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
if(drag.parentNode.id.split("-").at(-1) != ""){
|
||||
answer[drag.parentNode.id.split("-").at(-1)] = null
|
||||
}
|
||||
document.getElementsByClassName("code_vars")[0].appendChild(drag)
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
})
|
||||
|
||||
function check_task() {
|
||||
if(!Object.values(answer).includes(null)){
|
||||
let grade = 0;
|
||||
Object.entries(answer).forEach(([key,value]) => {
|
||||
if (value != null && value != "") {
|
||||
document.getElementById(`ans-${value}`).classList.remove("drag");
|
||||
if(key == value){
|
||||
// document.getElementById(`ask-${key}`).style.backgroundColor = "green";
|
||||
grade++;
|
||||
document.getElementById(`ans-${value}`).style.backgroundColor = "green";
|
||||
}else{
|
||||
// document.getElementById(`ask-${key}`).style.backgroundColor = "red";
|
||||
document.getElementById(`ans-${value}`).style.backgroundColor = "red";
|
||||
}
|
||||
}
|
||||
});
|
||||
setTimeout(()=>{
|
||||
if (grade == code.length) {
|
||||
alert("Поздравляю вы прошли уровень");
|
||||
console.log({theme:"<%= theme %>",lvl:"<%= lvl %>"});
|
||||
$.post("/finish/<%= theme %>/<%= lvl %>")
|
||||
.done(function( res ) {
|
||||
document.getElementsByClassName("check_btn")[0].setAttribute("onclick","")
|
||||
if("<%=lvl%>" != 5){
|
||||
let next_btn = document.createElement("button")
|
||||
next_btn.setAttribute("onclick",`goto('/<%= theme %>/<%= parseInt(lvl)+1 %>')`);
|
||||
next_btn.innerText = "следующий уровень";
|
||||
document.getElementsByClassName("header_btn3")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn3")[0].appendChild(next_btn);
|
||||
|
||||
let restart_btn = document.createElement("button")
|
||||
restart_btn.setAttribute("onclick","goto('')");
|
||||
restart_btn.innerText = "перезапустить";
|
||||
document.getElementsByClassName("header_btn2")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn2")[0].appendChild(restart_btn);
|
||||
}
|
||||
else{
|
||||
alert("Поздравляю вы прошли всю тему <%=theme_name%>");
|
||||
}
|
||||
})
|
||||
}
|
||||
else{
|
||||
alert("Вы не правильно выполнили задание");
|
||||
let restart_btn = document.createElement("button")
|
||||
restart_btn.setAttribute("onclick","goto('')");
|
||||
restart_btn.innerText = "перезапустить";
|
||||
document.getElementsByClassName("header_btn2")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn2")[0].appendChild(restart_btn);
|
||||
}
|
||||
},700)
|
||||
}
|
||||
else{
|
||||
alert("Сначала расставьте все строки")
|
||||
}
|
||||
}
|
||||
|
||||
interact('.dropzone').dropzone({
|
||||
overlap: 0.75,
|
||||
|
||||
ondropactivate: function (event) {
|
||||
// add active dropzone feedback
|
||||
event.target.classList.add('drop-active')
|
||||
},
|
||||
ondragenter: function (event) {
|
||||
var drag = event.relatedTarget
|
||||
var zone = event.target
|
||||
|
||||
// feedback the possibility of a drop
|
||||
zone.classList.add('drop-target')
|
||||
},
|
||||
ondragleave: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
// remove the drop feedback style
|
||||
// event.relatedTarget.classList.remove('can-drop')
|
||||
event.target.classList.remove('drop-target')
|
||||
// if(answer[zone.id.split("-").at(-1)] == drag.id.split("-").at(-1)){
|
||||
// answer[zone.id.split("-").at(-1)] = null
|
||||
// }
|
||||
|
||||
},
|
||||
ondrop: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
if (zone.children.length == 0) {
|
||||
zone.appendChild(drag)
|
||||
answer[zone.id.split("-").at(-1)] = drag.id.split("-").at(-1);
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
else{
|
||||
let child = zone.childNodes[0];
|
||||
let parent = drag.parentNode;
|
||||
if(zone.id.split("-").at(-1) != ""){
|
||||
answer[zone.id.split("-").at(-1)] = drag.id.split("-").at(-1);
|
||||
}
|
||||
if(parent.id.split("-").at(-1) != ""){
|
||||
answer[parent.id.split("-").at(-1)] = child.id.split("-").at(-1);
|
||||
}
|
||||
parent.appendChild(child)
|
||||
zone.appendChild(drag)
|
||||
setpos(0,0,child);
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
console.log(answer);
|
||||
|
||||
},
|
||||
ondropdeactivate: function (event) {
|
||||
event.target.classList.remove('drop-active')
|
||||
event.target.classList.remove('drop-target')
|
||||
}
|
||||
})
|
||||
|
||||
function dragMoveListener (event) {
|
||||
var target = event.target
|
||||
var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
|
||||
var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
|
||||
setpos(x,y,target);
|
||||
}
|
||||
|
||||
function setpos(x,y,obj) {
|
||||
obj.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
|
||||
obj.setAttribute('data-x', x)
|
||||
obj.setAttribute('data-y', y)
|
||||
}
|
||||
|
||||
// this function is used later in the resizing and gesture demos
|
||||
window.dragMoveListener = dragMoveListener
|
||||
|
||||
interact('.drag')
|
||||
.draggable({
|
||||
inertia: true,
|
||||
modifiers: [
|
||||
interact.modifiers.restrictRect({
|
||||
// restriction: 'parent',
|
||||
endOnly: true
|
||||
})
|
||||
],
|
||||
autoScroll: false,
|
||||
// dragMoveListener from the dragging demo above
|
||||
listeners: { move: dragMoveListener }
|
||||
})
|
||||
</script>
|
||||
|
||||
<%- include('../static/end.ejs') %>
|
||||
313
views/old/condition/lvl-4.ejs
Executable file
313
views/old/condition/lvl-4.ejs
Executable file
@ -0,0 +1,313 @@
|
||||
<%- include('../static/start.ejs') %>
|
||||
<style>
|
||||
.dropzone {
|
||||
background-color: #bfe4ff;
|
||||
border: dashed 4px transparent;
|
||||
border-radius: 4px;
|
||||
/* margin: 10px auto 10px; */
|
||||
/* padding: 10px; */
|
||||
padding: 5px;
|
||||
width: 50vw;
|
||||
min-height: 50px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.drop-active {
|
||||
border-color: #aaa;
|
||||
}
|
||||
|
||||
.drop-target {
|
||||
background-color: #29e;
|
||||
border-color: #fff;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.drag-drop {
|
||||
/* display: inline-block; */
|
||||
min-width: 40px;
|
||||
/* height: 15px; */
|
||||
padding: 5px;
|
||||
|
||||
/* padding: 2em 0.5em; */
|
||||
/* margin: 1rem 0 0 1rem; */
|
||||
|
||||
color: #fff;
|
||||
background-color: #29e;
|
||||
border: solid 2px #fff;
|
||||
|
||||
touch-action: none;
|
||||
transform: translate(0px, 0px);
|
||||
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.drag-drop.can-drop {
|
||||
color: #000;
|
||||
background-color: #4e4;
|
||||
}
|
||||
.code_vars li{
|
||||
/* display: inline-table; */
|
||||
width: max-content;
|
||||
max-width: 280px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<%
|
||||
task = 'Ввести число. Если оно неотрицательно, вычесть из него 50, в противном случае прибавить к нему 100.';
|
||||
code ="let int = prompt('Ввести число.'); /%"+
|
||||
"if (int < 0) _% { /%"+
|
||||
"int += 100; _% } /%"+
|
||||
"else _% { /%"+
|
||||
"int -= 50; _% } /%"+
|
||||
"return int; _% }"
|
||||
%>
|
||||
|
||||
<%- include('../static/header.ejs') %>
|
||||
<section class="main">
|
||||
<div class="main-top" style="display: flex;">
|
||||
<div class="code_space" style="width: 100vw;"></div>
|
||||
<ul class="code_vars" style="border: 1px #29e solid;max-width: 300px; display: block;width: -webkit-fill-available;"></ul>
|
||||
</div>
|
||||
<div class="main-bottom" style="display: block;margin-top: 20px;">
|
||||
<div class="task" style="margin-bottom: 20px;"><b>Задача: </b> <%= task %></div>
|
||||
<div style="display: flex; justify-content: space-around;">
|
||||
<button class="check_btn" onclick="check_task()">проверить</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
// function get_lvl(callback){
|
||||
// fetch("/lvls/<%=theme%>/<%=lvl%>.txt")
|
||||
// .then((response) => {
|
||||
// return response.text();
|
||||
// })
|
||||
// .then((data) => {
|
||||
// callback(data);
|
||||
// })
|
||||
// }
|
||||
|
||||
function check_next() {
|
||||
$.post("/check/<%= theme %>/<%= lvl %>")
|
||||
.done(function( res ) {
|
||||
console.log(res["body"]);
|
||||
if(res["body"] == true){
|
||||
if("<%=lvl%>" != 5){
|
||||
let next_btn = document.createElement("button")
|
||||
next_btn.setAttribute("onclick",`goto('/<%= theme %>/<%= parseInt(lvl)+1 %>')`);
|
||||
next_btn.innerText = "следующий уровень";
|
||||
document.getElementsByClassName("header_btn3")[0].appendChild(next_btn);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
check_next()
|
||||
let answer = {};
|
||||
let code = [];
|
||||
show_task();
|
||||
|
||||
function show_task() {
|
||||
code = "<%-code%>".split("/%");
|
||||
Object.entries(code).forEach(([key,value]) => {
|
||||
code[key] = value.replace("_%","\n");
|
||||
});
|
||||
|
||||
let arr = [];
|
||||
Object.entries(code).forEach(([key,value]) => {
|
||||
// console.log(key,value);
|
||||
let new_obj = document.createElement("li");
|
||||
new_obj.id = `ans-${key}`;
|
||||
new_obj.classList.add("drag-drop");
|
||||
new_obj.classList.add("drag");
|
||||
new_obj.innerText = value;
|
||||
|
||||
let ask_obj = document.createElement("div");
|
||||
ask_obj.id = `ask-${key}`;
|
||||
ask_obj.classList.add(`dropzone`);
|
||||
|
||||
arr.push(new_obj);
|
||||
console.log(arr);
|
||||
// document.getElementsByClassName("code_vars")[0].appendChild(new_obj);
|
||||
document.getElementsByClassName("code_space")[0].appendChild(ask_obj);
|
||||
answer[key] = null
|
||||
});
|
||||
|
||||
Object.entries(shuffle_array(arr)).forEach(([key,value]) => {
|
||||
document.getElementsByClassName("code_vars")[0].appendChild(value);
|
||||
});
|
||||
}
|
||||
|
||||
function shuffle_array(array) {
|
||||
var currentIndex = array.length, temporaryValue, randomIndex;
|
||||
|
||||
while (0 !== currentIndex) {
|
||||
|
||||
randomIndex = Math.floor(Math.random() * currentIndex);
|
||||
currentIndex -= 1;
|
||||
|
||||
temporaryValue = array[currentIndex];
|
||||
array[currentIndex] = array[randomIndex];
|
||||
array[randomIndex] = temporaryValue;
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
interact('.main').dropzone({
|
||||
overlap: 0.75,
|
||||
|
||||
ondrop: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
if(drag.parentNode.id.split("-").at(-1) != ""){
|
||||
answer[drag.parentNode.id.split("-").at(-1)] = null
|
||||
}
|
||||
document.getElementsByClassName("code_vars")[0].appendChild(drag)
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
})
|
||||
|
||||
function check_task() {
|
||||
if(!Object.values(answer).includes(null)){
|
||||
let grade = 0;
|
||||
Object.entries(answer).forEach(([key,value]) => {
|
||||
if (value != null && value != "") {
|
||||
document.getElementById(`ans-${value}`).classList.remove("drag");
|
||||
if(key == value){
|
||||
// document.getElementById(`ask-${key}`).style.backgroundColor = "green";
|
||||
grade++;
|
||||
document.getElementById(`ans-${value}`).style.backgroundColor = "green";
|
||||
}else{
|
||||
// document.getElementById(`ask-${key}`).style.backgroundColor = "red";
|
||||
document.getElementById(`ans-${value}`).style.backgroundColor = "red";
|
||||
}
|
||||
}
|
||||
});
|
||||
setTimeout(()=>{
|
||||
if (grade == code.length) {
|
||||
alert("Поздравляю вы прошли уровень");
|
||||
console.log({theme:"<%= theme %>",lvl:"<%= lvl %>"});
|
||||
$.post("/finish/<%= theme %>/<%= lvl %>")
|
||||
.done(function( res ) {
|
||||
document.getElementsByClassName("check_btn")[0].setAttribute("onclick","")
|
||||
if("<%=lvl%>" != 5){
|
||||
let next_btn = document.createElement("button")
|
||||
next_btn.setAttribute("onclick",`goto('/<%= theme %>/<%= parseInt(lvl)+1 %>')`);
|
||||
next_btn.innerText = "следующий уровень";
|
||||
document.getElementsByClassName("header_btn3")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn3")[0].appendChild(next_btn);
|
||||
|
||||
let restart_btn = document.createElement("button")
|
||||
restart_btn.setAttribute("onclick","goto('')");
|
||||
restart_btn.innerText = "перезапустить";
|
||||
document.getElementsByClassName("header_btn2")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn2")[0].appendChild(restart_btn);
|
||||
}
|
||||
else{
|
||||
alert("Поздравляю вы прошли всю тему <%=theme_name%>");
|
||||
}
|
||||
})
|
||||
}
|
||||
else{
|
||||
alert("Вы не правильно выполнили задание");
|
||||
let restart_btn = document.createElement("button")
|
||||
restart_btn.setAttribute("onclick","goto('')");
|
||||
restart_btn.innerText = "перезапустить";
|
||||
document.getElementsByClassName("header_btn2")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn2")[0].appendChild(restart_btn);
|
||||
}
|
||||
},700)
|
||||
}
|
||||
else{
|
||||
alert("Сначала расставьте все строки")
|
||||
}
|
||||
}
|
||||
|
||||
interact('.dropzone').dropzone({
|
||||
overlap: 0.75,
|
||||
|
||||
ondropactivate: function (event) {
|
||||
// add active dropzone feedback
|
||||
event.target.classList.add('drop-active')
|
||||
},
|
||||
ondragenter: function (event) {
|
||||
var drag = event.relatedTarget
|
||||
var zone = event.target
|
||||
|
||||
// feedback the possibility of a drop
|
||||
zone.classList.add('drop-target')
|
||||
},
|
||||
ondragleave: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
// remove the drop feedback style
|
||||
// event.relatedTarget.classList.remove('can-drop')
|
||||
event.target.classList.remove('drop-target')
|
||||
// if(answer[zone.id.split("-").at(-1)] == drag.id.split("-").at(-1)){
|
||||
// answer[zone.id.split("-").at(-1)] = null
|
||||
// }
|
||||
|
||||
},
|
||||
ondrop: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
if (zone.children.length == 0) {
|
||||
zone.appendChild(drag)
|
||||
answer[zone.id.split("-").at(-1)] = drag.id.split("-").at(-1);
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
else{
|
||||
let child = zone.childNodes[0];
|
||||
let parent = drag.parentNode;
|
||||
if(zone.id.split("-").at(-1) != ""){
|
||||
answer[zone.id.split("-").at(-1)] = drag.id.split("-").at(-1);
|
||||
}
|
||||
if(parent.id.split("-").at(-1) != ""){
|
||||
answer[parent.id.split("-").at(-1)] = child.id.split("-").at(-1);
|
||||
}
|
||||
parent.appendChild(child)
|
||||
zone.appendChild(drag)
|
||||
setpos(0,0,child);
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
console.log(answer);
|
||||
|
||||
},
|
||||
ondropdeactivate: function (event) {
|
||||
event.target.classList.remove('drop-active')
|
||||
event.target.classList.remove('drop-target')
|
||||
}
|
||||
})
|
||||
|
||||
function dragMoveListener (event) {
|
||||
var target = event.target
|
||||
var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
|
||||
var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
|
||||
setpos(x,y,target);
|
||||
}
|
||||
|
||||
function setpos(x,y,obj) {
|
||||
obj.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
|
||||
obj.setAttribute('data-x', x)
|
||||
obj.setAttribute('data-y', y)
|
||||
}
|
||||
|
||||
// this function is used later in the resizing and gesture demos
|
||||
window.dragMoveListener = dragMoveListener
|
||||
|
||||
interact('.drag')
|
||||
.draggable({
|
||||
inertia: true,
|
||||
modifiers: [
|
||||
interact.modifiers.restrictRect({
|
||||
// restriction: 'parent',
|
||||
endOnly: true
|
||||
})
|
||||
],
|
||||
autoScroll: false,
|
||||
// dragMoveListener from the dragging demo above
|
||||
listeners: { move: dragMoveListener }
|
||||
})
|
||||
</script>
|
||||
|
||||
<%- include('../static/end.ejs') %>
|
||||
312
views/old/condition/lvl-5.ejs
Executable file
312
views/old/condition/lvl-5.ejs
Executable file
@ -0,0 +1,312 @@
|
||||
<%- include('../static/start.ejs') %>
|
||||
<style>
|
||||
.dropzone {
|
||||
background-color: #bfe4ff;
|
||||
border: dashed 4px transparent;
|
||||
border-radius: 4px;
|
||||
/* margin: 10px auto 10px; */
|
||||
/* padding: 10px; */
|
||||
padding: 5px;
|
||||
width: 50vw;
|
||||
min-height: 50px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.drop-active {
|
||||
border-color: #aaa;
|
||||
}
|
||||
|
||||
.drop-target {
|
||||
background-color: #29e;
|
||||
border-color: #fff;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.drag-drop {
|
||||
/* display: inline-block; */
|
||||
min-width: 40px;
|
||||
/* height: 15px; */
|
||||
padding: 5px;
|
||||
|
||||
/* padding: 2em 0.5em; */
|
||||
/* margin: 1rem 0 0 1rem; */
|
||||
|
||||
color: #fff;
|
||||
background-color: #29e;
|
||||
border: solid 2px #fff;
|
||||
|
||||
touch-action: none;
|
||||
transform: translate(0px, 0px);
|
||||
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.drag-drop.can-drop {
|
||||
color: #000;
|
||||
background-color: #4e4;
|
||||
}
|
||||
.code_vars li{
|
||||
/* display: inline-table; */
|
||||
width: max-content;
|
||||
max-width: 280px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<%
|
||||
task = 'Ввести 2 числа. Если их произведение отрицательно, умножить его на –2 и вывести на экран, в противном случае увеличить его в 1,5 раза и вывести на экран.';
|
||||
code ="let a = prompt(), b = prompt(); /%"+
|
||||
"if (a * b < 0) _% { /%"+
|
||||
"return ((a * b) * -2); _% } /%"+
|
||||
"else _% { /%"+
|
||||
"return ((a * b) * 1.5); _% }"
|
||||
%>
|
||||
|
||||
<%- include('../static/header.ejs') %>
|
||||
<section class="main">
|
||||
<div class="main-top" style="display: flex;">
|
||||
<div class="code_space" style="width: 100vw;"></div>
|
||||
<ul class="code_vars" style="border: 1px #29e solid;max-width: 300px; display: block;width: -webkit-fill-available;"></ul>
|
||||
</div>
|
||||
<div class="main-bottom" style="display: block;margin-top: 20px;">
|
||||
<div class="task" style="margin-bottom: 20px;"><b>Задача: </b> <%= task %></div>
|
||||
<div style="display: flex; justify-content: space-around;">
|
||||
<button class="check_btn" onclick="check_task()">проверить</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
// function get_lvl(callback){
|
||||
// fetch("/lvls/<%=theme%>/<%=lvl%>.txt")
|
||||
// .then((response) => {
|
||||
// return response.text();
|
||||
// })
|
||||
// .then((data) => {
|
||||
// callback(data);
|
||||
// })
|
||||
// }
|
||||
|
||||
function check_next() {
|
||||
$.post("/check/<%= theme %>/<%= lvl %>")
|
||||
.done(function( res ) {
|
||||
console.log(res["body"]);
|
||||
if(res["body"] == true){
|
||||
if("<%=lvl%>" != 5){
|
||||
let next_btn = document.createElement("button")
|
||||
next_btn.setAttribute("onclick",`goto('/<%= theme %>/<%= parseInt(lvl)+1 %>')`);
|
||||
next_btn.innerText = "следующий уровень";
|
||||
document.getElementsByClassName("header_btn3")[0].appendChild(next_btn);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
check_next()
|
||||
let answer = {};
|
||||
let code = [];
|
||||
show_task();
|
||||
|
||||
function show_task() {
|
||||
code = "<%-code%>".split("/%");
|
||||
Object.entries(code).forEach(([key,value]) => {
|
||||
code[key] = value.replace("_%","\n");
|
||||
});
|
||||
|
||||
let arr = [];
|
||||
Object.entries(code).forEach(([key,value]) => {
|
||||
// console.log(key,value);
|
||||
let new_obj = document.createElement("li");
|
||||
new_obj.id = `ans-${key}`;
|
||||
new_obj.classList.add("drag-drop");
|
||||
new_obj.classList.add("drag");
|
||||
new_obj.innerText = value;
|
||||
|
||||
let ask_obj = document.createElement("div");
|
||||
ask_obj.id = `ask-${key}`;
|
||||
ask_obj.classList.add(`dropzone`);
|
||||
|
||||
arr.push(new_obj);
|
||||
console.log(arr);
|
||||
// document.getElementsByClassName("code_vars")[0].appendChild(new_obj);
|
||||
document.getElementsByClassName("code_space")[0].appendChild(ask_obj);
|
||||
answer[key] = null
|
||||
});
|
||||
|
||||
Object.entries(shuffle_array(arr)).forEach(([key,value]) => {
|
||||
document.getElementsByClassName("code_vars")[0].appendChild(value);
|
||||
});
|
||||
}
|
||||
|
||||
function shuffle_array(array) {
|
||||
var currentIndex = array.length, temporaryValue, randomIndex;
|
||||
|
||||
while (0 !== currentIndex) {
|
||||
|
||||
randomIndex = Math.floor(Math.random() * currentIndex);
|
||||
currentIndex -= 1;
|
||||
|
||||
temporaryValue = array[currentIndex];
|
||||
array[currentIndex] = array[randomIndex];
|
||||
array[randomIndex] = temporaryValue;
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
interact('.main').dropzone({
|
||||
overlap: 0.75,
|
||||
|
||||
ondrop: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
if(drag.parentNode.id.split("-").at(-1) != ""){
|
||||
answer[drag.parentNode.id.split("-").at(-1)] = null
|
||||
}
|
||||
document.getElementsByClassName("code_vars")[0].appendChild(drag)
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
})
|
||||
|
||||
function check_task() {
|
||||
if(!Object.values(answer).includes(null)){
|
||||
let grade = 0;
|
||||
Object.entries(answer).forEach(([key,value]) => {
|
||||
if (value != null && value != "") {
|
||||
document.getElementById(`ans-${value}`).classList.remove("drag");
|
||||
if(key == value){
|
||||
// document.getElementById(`ask-${key}`).style.backgroundColor = "green";
|
||||
grade++;
|
||||
document.getElementById(`ans-${value}`).style.backgroundColor = "green";
|
||||
}else{
|
||||
// document.getElementById(`ask-${key}`).style.backgroundColor = "red";
|
||||
document.getElementById(`ans-${value}`).style.backgroundColor = "red";
|
||||
}
|
||||
}
|
||||
});
|
||||
setTimeout(()=>{
|
||||
if (grade == code.length) {
|
||||
alert("Поздравляю вы прошли уровень");
|
||||
console.log({theme:"<%= theme %>",lvl:"<%= lvl %>"});
|
||||
$.post("/finish/<%= theme %>/<%= lvl %>")
|
||||
.done(function( res ) {
|
||||
document.getElementsByClassName("check_btn")[0].setAttribute("onclick","")
|
||||
if("<%=lvl%>" != 5){
|
||||
let next_btn = document.createElement("button")
|
||||
next_btn.setAttribute("onclick",`goto('/<%= theme %>/<%= parseInt(lvl)+1 %>')`);
|
||||
next_btn.innerText = "следующий уровень";
|
||||
document.getElementsByClassName("header_btn3")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn3")[0].appendChild(next_btn);
|
||||
|
||||
let restart_btn = document.createElement("button")
|
||||
restart_btn.setAttribute("onclick","goto('')");
|
||||
restart_btn.innerText = "перезапустить";
|
||||
document.getElementsByClassName("header_btn2")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn2")[0].appendChild(restart_btn);
|
||||
}
|
||||
else{
|
||||
alert("Поздравляю вы прошли всю тему <%=theme_name%>");
|
||||
}
|
||||
})
|
||||
}
|
||||
else{
|
||||
alert("Вы не правильно выполнили задание");
|
||||
let restart_btn = document.createElement("button")
|
||||
restart_btn.setAttribute("onclick","goto('')");
|
||||
restart_btn.innerText = "перезапустить";
|
||||
document.getElementsByClassName("header_btn2")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn2")[0].appendChild(restart_btn);
|
||||
}
|
||||
},700)
|
||||
}
|
||||
else{
|
||||
alert("Сначала расставьте все строки")
|
||||
}
|
||||
}
|
||||
|
||||
interact('.dropzone').dropzone({
|
||||
overlap: 0.75,
|
||||
|
||||
ondropactivate: function (event) {
|
||||
// add active dropzone feedback
|
||||
event.target.classList.add('drop-active')
|
||||
},
|
||||
ondragenter: function (event) {
|
||||
var drag = event.relatedTarget
|
||||
var zone = event.target
|
||||
|
||||
// feedback the possibility of a drop
|
||||
zone.classList.add('drop-target')
|
||||
},
|
||||
ondragleave: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
// remove the drop feedback style
|
||||
// event.relatedTarget.classList.remove('can-drop')
|
||||
event.target.classList.remove('drop-target')
|
||||
// if(answer[zone.id.split("-").at(-1)] == drag.id.split("-").at(-1)){
|
||||
// answer[zone.id.split("-").at(-1)] = null
|
||||
// }
|
||||
|
||||
},
|
||||
ondrop: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
if (zone.children.length == 0) {
|
||||
zone.appendChild(drag)
|
||||
answer[zone.id.split("-").at(-1)] = drag.id.split("-").at(-1);
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
else{
|
||||
let child = zone.childNodes[0];
|
||||
let parent = drag.parentNode;
|
||||
if(zone.id.split("-").at(-1) != ""){
|
||||
answer[zone.id.split("-").at(-1)] = drag.id.split("-").at(-1);
|
||||
}
|
||||
if(parent.id.split("-").at(-1) != ""){
|
||||
answer[parent.id.split("-").at(-1)] = child.id.split("-").at(-1);
|
||||
}
|
||||
parent.appendChild(child)
|
||||
zone.appendChild(drag)
|
||||
setpos(0,0,child);
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
console.log(answer);
|
||||
|
||||
},
|
||||
ondropdeactivate: function (event) {
|
||||
event.target.classList.remove('drop-active')
|
||||
event.target.classList.remove('drop-target')
|
||||
}
|
||||
})
|
||||
|
||||
function dragMoveListener (event) {
|
||||
var target = event.target
|
||||
var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
|
||||
var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
|
||||
setpos(x,y,target);
|
||||
}
|
||||
|
||||
function setpos(x,y,obj) {
|
||||
obj.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
|
||||
obj.setAttribute('data-x', x)
|
||||
obj.setAttribute('data-y', y)
|
||||
}
|
||||
|
||||
// this function is used later in the resizing and gesture demos
|
||||
window.dragMoveListener = dragMoveListener
|
||||
|
||||
interact('.drag')
|
||||
.draggable({
|
||||
inertia: true,
|
||||
modifiers: [
|
||||
interact.modifiers.restrictRect({
|
||||
// restriction: 'parent',
|
||||
endOnly: true
|
||||
})
|
||||
],
|
||||
autoScroll: false,
|
||||
// dragMoveListener from the dragging demo above
|
||||
listeners: { move: dragMoveListener }
|
||||
})
|
||||
</script>
|
||||
|
||||
<%- include('../static/end.ejs') %>
|
||||
339
views/old/consecution/lvl-1.ejs
Executable file
339
views/old/consecution/lvl-1.ejs
Executable file
@ -0,0 +1,339 @@
|
||||
<%- include('../static/start.ejs') %>
|
||||
<style>
|
||||
.dropzone {
|
||||
background-color: #bfe4ff;
|
||||
border: dashed 4px transparent;
|
||||
border-radius: 4px;
|
||||
/* margin: 10px auto 10px; */
|
||||
/* padding: 10px; */
|
||||
padding: 5px;
|
||||
width: 50vw;
|
||||
min-height: 50px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.drop-active {
|
||||
border-color: #aaa;
|
||||
}
|
||||
|
||||
.drop-target {
|
||||
background-color: #29e;
|
||||
border-color: #fff;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.drag-drop {
|
||||
/* display: inline-block; */
|
||||
min-width: 40px;
|
||||
/* height: 15px; */
|
||||
padding: 5px;
|
||||
|
||||
/* padding: 2em 0.5em; */
|
||||
/* margin: 1rem 0 0 1rem; */
|
||||
|
||||
color: #fff;
|
||||
background-color: #29e;
|
||||
border: solid 2px #fff;
|
||||
|
||||
touch-action: none;
|
||||
transform: translate(0px, 0px);
|
||||
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.drag-drop.can-drop {
|
||||
color: #000;
|
||||
background-color: #4e4;
|
||||
}
|
||||
.code_vars li{
|
||||
/* display: inline-table; */
|
||||
width: max-content;
|
||||
max-width: 280px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<%
|
||||
task = "Написать программу, которая подсчитывает: периметр квадрата, площадь которого равна а";
|
||||
code ="let S = a; /%"+
|
||||
"let s = Math.sqrt(S); /%"+
|
||||
"let P = 4 * s; /%"+
|
||||
"return `периметр квадрата равен ${P}`;";
|
||||
%>
|
||||
|
||||
<%- include('../static/header.ejs') %>
|
||||
<section class="main">
|
||||
<div class="task" style="margin-bottom: 20px;"><b>Задача: </b> <%= task %></div>
|
||||
<div class="main-top" style="display: flex;">
|
||||
<div class="code_space" style="width: 100vw;"></div>
|
||||
<ul class="code_vars" style="border: 1px #29e solid;max-width: 300px; display: block;width: -webkit-fill-available;"></ul>
|
||||
</div>
|
||||
<div class="main-bottom" style="display: block;margin-top: 20px;">
|
||||
<div style="display: flex; justify-content: space-around;">
|
||||
<button class="check_btn" onclick="check_task()">проверить</button>
|
||||
<div>Вывод: <div id="test-res"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
function test(arr) {
|
||||
let str = `let a = 12; `;
|
||||
// let str = `try { let a = 12; `;
|
||||
let test_out;
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
const element = arr[i];
|
||||
let ans_code = document.getElementById(`ans-${element}`).innerText;
|
||||
str += ` ${ans_code}`;
|
||||
try {
|
||||
let func = new Function(str);
|
||||
test_out = func();
|
||||
console.log(str);
|
||||
document.getElementById(`ans-${element}`).style.backgroundColor = "green";
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
document.getElementById(`ans-${element}`).style.backgroundColor = "red";
|
||||
test_out = error;
|
||||
document.getElementById("test-res").innerText = test_out;
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
// str += `} catch (error) { return error; }`;
|
||||
}
|
||||
|
||||
// function get_lvl(callback){
|
||||
// fetch("/lvls/<%=theme%>/<%=lvl%>.txt")
|
||||
// .then((response) => {
|
||||
// return response.text();
|
||||
// })
|
||||
// .then((data) => {
|
||||
// callback(data);
|
||||
// })
|
||||
// }
|
||||
|
||||
function check_next() {
|
||||
$.post("/check/<%= theme %>/<%= lvl %>")
|
||||
.done(function( res ) {
|
||||
console.log(res["body"]);
|
||||
if(res["body"] == true){
|
||||
if("<%=lvl%>" != 5){
|
||||
let next_btn = document.createElement("button")
|
||||
next_btn.setAttribute("onclick",`goto('/<%= theme %>/<%= parseInt(lvl)+1 %>')`);
|
||||
next_btn.innerText = "следующий уровень";
|
||||
document.getElementsByClassName("header_btn3")[0].appendChild(next_btn);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
check_next()
|
||||
let answer = {};
|
||||
let code = [];
|
||||
show_task();
|
||||
|
||||
function show_task() {
|
||||
code = "<%-code%>".split("/%");
|
||||
Object.entries(code).forEach(([key,value]) => {
|
||||
code[key] = value.replace("_%","\n");
|
||||
});
|
||||
|
||||
let arr = [];
|
||||
Object.entries(code).forEach(([key,value]) => {
|
||||
// console.log(key,value);
|
||||
let new_obj = document.createElement("li");
|
||||
new_obj.id = `ans-${key}`;
|
||||
new_obj.classList.add("drag-drop");
|
||||
new_obj.classList.add("drag");
|
||||
new_obj.innerText = value;
|
||||
|
||||
let ask_obj = document.createElement("div");
|
||||
ask_obj.id = `ask-${key}`;
|
||||
ask_obj.classList.add(`dropzone`);
|
||||
|
||||
arr.push(new_obj);
|
||||
console.log(arr);
|
||||
// document.getElementsByClassName("code_vars")[0].appendChild(new_obj);
|
||||
document.getElementsByClassName("code_space")[0].appendChild(ask_obj);
|
||||
answer[key] = null
|
||||
});
|
||||
|
||||
Object.entries(shuffle_array(arr)).forEach(([key,value]) => {
|
||||
document.getElementsByClassName("code_vars")[0].appendChild(value);
|
||||
});
|
||||
}
|
||||
|
||||
function shuffle_array(array) {
|
||||
var currentIndex = array.length, temporaryValue, randomIndex;
|
||||
|
||||
while (0 !== currentIndex) {
|
||||
|
||||
randomIndex = Math.floor(Math.random() * currentIndex);
|
||||
currentIndex -= 1;
|
||||
|
||||
temporaryValue = array[currentIndex];
|
||||
array[currentIndex] = array[randomIndex];
|
||||
array[randomIndex] = temporaryValue;
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
interact('.main').dropzone({
|
||||
overlap: 0.75,
|
||||
|
||||
ondrop: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
if(drag.parentNode.id.split("-").at(-1) != ""){
|
||||
answer[drag.parentNode.id.split("-").at(-1)] = null
|
||||
}
|
||||
document.getElementsByClassName("code_vars")[0].appendChild(drag)
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
})
|
||||
|
||||
function check_task() {
|
||||
console.log(test(Object.values(answer)));
|
||||
if(!Object.values(answer).includes(null)){
|
||||
// let grade = 0;
|
||||
// Object.entries(answer).forEach(([key,value]) => {
|
||||
// if (value != null && value != "") {
|
||||
// document.getElementById(`ans-${value}`).classList.remove("drag");
|
||||
// if(key == value){
|
||||
// // document.getElementById(`ask-${key}`).style.backgroundColor = "green";
|
||||
// grade++;
|
||||
// // document.getElementById(`ans-${value}`).style.backgroundColor = "green";
|
||||
// }else{
|
||||
// // document.getElementById(`ask-${key}`).style.backgroundColor = "red";
|
||||
// // document.getElementById(`ans-${value}`).style.backgroundColor = "red";
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
setTimeout(()=>{
|
||||
if (test(Object.values(answer))) {
|
||||
alert("Поздравляю вы прошли уровень");
|
||||
console.log({theme:"<%= theme %>",lvl:"<%= lvl %>"});
|
||||
$.post("/finish/<%= theme %>/<%= lvl %>")
|
||||
.done(function( res ) {
|
||||
document.getElementsByClassName("check_btn")[0].setAttribute("onclick","")
|
||||
if("<%=lvl%>" != 5){
|
||||
let next_btn = document.createElement("button")
|
||||
next_btn.setAttribute("onclick",`goto('/<%= theme %>/<%= parseInt(lvl)+1 %>')`);
|
||||
next_btn.innerText = "следующий уровень";
|
||||
document.getElementsByClassName("header_btn3")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn3")[0].appendChild(next_btn);
|
||||
|
||||
let restart_btn = document.createElement("button")
|
||||
restart_btn.setAttribute("onclick","goto('')");
|
||||
restart_btn.innerText = "перезапустить";
|
||||
document.getElementsByClassName("header_btn2")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn2")[0].appendChild(restart_btn);
|
||||
}
|
||||
else{
|
||||
alert("Поздравляю вы прошли всю тему <%=theme_name%>");
|
||||
}
|
||||
})
|
||||
}
|
||||
else{
|
||||
// test(Object.values(answer));
|
||||
alert("Вы не правильно выполнили задание");
|
||||
let restart_btn = document.createElement("button")
|
||||
restart_btn.setAttribute("onclick","goto('')");
|
||||
restart_btn.innerText = "перезапустить";
|
||||
document.getElementsByClassName("header_btn2")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn2")[0].appendChild(restart_btn);
|
||||
}
|
||||
},700)
|
||||
}
|
||||
else{
|
||||
alert("Сначала расставьте все строки")
|
||||
}
|
||||
}
|
||||
|
||||
interact('.dropzone').dropzone({
|
||||
overlap: 0.75,
|
||||
|
||||
ondropactivate: function (event) {
|
||||
// add active dropzone feedback
|
||||
event.target.classList.add('drop-active')
|
||||
},
|
||||
ondragenter: function (event) {
|
||||
var drag = event.relatedTarget
|
||||
var zone = event.target
|
||||
|
||||
// feedback the possibility of a drop
|
||||
zone.classList.add('drop-target')
|
||||
},
|
||||
ondragleave: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
// remove the drop feedback style
|
||||
// event.relatedTarget.classList.remove('can-drop')
|
||||
event.target.classList.remove('drop-target')
|
||||
// if(answer[zone.id.split("-").at(-1)] == drag.id.split("-").at(-1)){
|
||||
// answer[zone.id.split("-").at(-1)] = null
|
||||
// }
|
||||
|
||||
},
|
||||
ondrop: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
if (zone.children.length == 0) {
|
||||
zone.appendChild(drag)
|
||||
answer[zone.id.split("-").at(-1)] = drag.id.split("-").at(-1);
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
else{
|
||||
let child = zone.childNodes[0];
|
||||
let parent = drag.parentNode;
|
||||
if(zone.id.split("-").at(-1) != ""){
|
||||
answer[zone.id.split("-").at(-1)] = drag.id.split("-").at(-1);
|
||||
}
|
||||
if(parent.id.split("-").at(-1) != ""){
|
||||
answer[parent.id.split("-").at(-1)] = child.id.split("-").at(-1);
|
||||
}
|
||||
parent.appendChild(child)
|
||||
zone.appendChild(drag)
|
||||
setpos(0,0,child);
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
console.log(answer);
|
||||
|
||||
},
|
||||
ondropdeactivate: function (event) {
|
||||
event.target.classList.remove('drop-active')
|
||||
event.target.classList.remove('drop-target')
|
||||
}
|
||||
})
|
||||
|
||||
function dragMoveListener (event) {
|
||||
var target = event.target
|
||||
var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
|
||||
var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
|
||||
setpos(x,y,target);
|
||||
}
|
||||
|
||||
function setpos(x,y,obj) {
|
||||
obj.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
|
||||
obj.setAttribute('data-x', x)
|
||||
obj.setAttribute('data-y', y)
|
||||
}
|
||||
|
||||
// this function is used later in the resizing and gesture demos
|
||||
window.dragMoveListener = dragMoveListener
|
||||
|
||||
interact('.drag')
|
||||
.draggable({
|
||||
inertia: true,
|
||||
modifiers: [
|
||||
interact.modifiers.restrictRect({
|
||||
// restriction: 'parent',
|
||||
endOnly: true
|
||||
})
|
||||
],
|
||||
autoScroll: false,
|
||||
// dragMoveListener from the dragging demo above
|
||||
listeners: { move: dragMoveListener }
|
||||
})
|
||||
</script>
|
||||
|
||||
<%- include('../static/end.ejs') %>
|
||||
310
views/old/consecution/lvl-2.ejs
Executable file
310
views/old/consecution/lvl-2.ejs
Executable file
@ -0,0 +1,310 @@
|
||||
<%- include('../static/start.ejs') %>
|
||||
<style>
|
||||
.dropzone {
|
||||
background-color: #bfe4ff;
|
||||
border: dashed 4px transparent;
|
||||
border-radius: 4px;
|
||||
/* margin: 10px auto 10px; */
|
||||
/* padding: 10px; */
|
||||
padding: 5px;
|
||||
width: 50vw;
|
||||
min-height: 50px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.drop-active {
|
||||
border-color: #aaa;
|
||||
}
|
||||
|
||||
.drop-target {
|
||||
background-color: #29e;
|
||||
border-color: #fff;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.drag-drop {
|
||||
/* display: inline-block; */
|
||||
min-width: 40px;
|
||||
/* height: 15px; */
|
||||
padding: 5px;
|
||||
|
||||
/* padding: 2em 0.5em; */
|
||||
/* margin: 1rem 0 0 1rem; */
|
||||
|
||||
color: #fff;
|
||||
background-color: #29e;
|
||||
border: solid 2px #fff;
|
||||
|
||||
touch-action: none;
|
||||
transform: translate(0px, 0px);
|
||||
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.drag-drop.can-drop {
|
||||
color: #000;
|
||||
background-color: #4e4;
|
||||
}
|
||||
.code_vars li{
|
||||
/* display: inline-table; */
|
||||
width: max-content;
|
||||
max-width: 280px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<%
|
||||
task = "Написать программу, которая подсчитывает: площадь равностороннего треугольника, периметр которого равен р";
|
||||
code ="let P = p; /%"+
|
||||
"let a = P / 3;/%"+
|
||||
"let S = (Math.pow(a,2) * Math.sqrt(3)) / 4;/%"+
|
||||
"return площадь равностороннего треугольника равна ${S}`"
|
||||
%>
|
||||
|
||||
<%- include('../static/header.ejs') %>
|
||||
<section class="main">
|
||||
<div class="main-top" style="display: flex;">
|
||||
<div class="code_space" style="width: 100vw;"></div>
|
||||
<ul class="code_vars" style="border: 1px #29e solid;max-width: 300px; display: block;width: -webkit-fill-available;"></ul>
|
||||
</div>
|
||||
<div class="main-bottom" style="display: block;margin-top: 20px;">
|
||||
<div class="task" style="margin-bottom: 20px;"><b>Задача: </b> <%= task %></div>
|
||||
<div style="display: flex; justify-content: space-around;">
|
||||
<button class="check_btn" onclick="check_task()">проверить</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
// function get_lvl(callback){
|
||||
// fetch("/lvls/<%=theme%>/<%=lvl%>.txt")
|
||||
// .then((response) => {
|
||||
// return response.text();
|
||||
// })
|
||||
// .then((data) => {
|
||||
// callback(data);
|
||||
// })
|
||||
// }
|
||||
function check_next() {
|
||||
$.post("/check/<%= theme %>/<%= lvl %>")
|
||||
.done(function( res ) {
|
||||
console.log(res["body"]);
|
||||
if(res["body"] == true){
|
||||
if("<%=lvl%>" != 5){
|
||||
let next_btn = document.createElement("button")
|
||||
next_btn.setAttribute("onclick",`goto('/<%= theme %>/<%= parseInt(lvl)+1 %>')`);
|
||||
next_btn.innerText = "следующий уровень";
|
||||
document.getElementsByClassName("header_btn3")[0].appendChild(next_btn);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
check_next()
|
||||
let answer = {};
|
||||
let code = [];
|
||||
show_task();
|
||||
|
||||
function show_task() {
|
||||
code = "<%-code%>".split("/%");
|
||||
Object.entries(code).forEach(([key,value]) => {
|
||||
code[key] = value.replace("_%","\n");
|
||||
});
|
||||
|
||||
let arr = [];
|
||||
Object.entries(code).forEach(([key,value]) => {
|
||||
// console.log(key,value);
|
||||
let new_obj = document.createElement("li");
|
||||
new_obj.id = `ans-${key}`;
|
||||
new_obj.classList.add("drag-drop");
|
||||
new_obj.classList.add("drag");
|
||||
new_obj.innerText = value;
|
||||
|
||||
let ask_obj = document.createElement("div");
|
||||
ask_obj.id = `ask-${key}`;
|
||||
ask_obj.classList.add(`dropzone`);
|
||||
|
||||
arr.push(new_obj);
|
||||
console.log(arr);
|
||||
// document.getElementsByClassName("code_vars")[0].appendChild(new_obj);
|
||||
document.getElementsByClassName("code_space")[0].appendChild(ask_obj);
|
||||
answer[key] = null
|
||||
});
|
||||
|
||||
Object.entries(shuffle_array(arr)).forEach(([key,value]) => {
|
||||
document.getElementsByClassName("code_vars")[0].appendChild(value);
|
||||
});
|
||||
}
|
||||
|
||||
function shuffle_array(array) {
|
||||
var currentIndex = array.length, temporaryValue, randomIndex;
|
||||
|
||||
while (0 !== currentIndex) {
|
||||
|
||||
randomIndex = Math.floor(Math.random() * currentIndex);
|
||||
currentIndex -= 1;
|
||||
|
||||
temporaryValue = array[currentIndex];
|
||||
array[currentIndex] = array[randomIndex];
|
||||
array[randomIndex] = temporaryValue;
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
interact('.main').dropzone({
|
||||
overlap: 0.75,
|
||||
|
||||
ondrop: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
if(drag.parentNode.id.split("-").at(-1) != ""){
|
||||
answer[drag.parentNode.id.split("-").at(-1)] = null
|
||||
}
|
||||
document.getElementsByClassName("code_vars")[0].appendChild(drag)
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
})
|
||||
|
||||
function check_task() {
|
||||
if(!Object.values(answer).includes(null)){
|
||||
let grade = 0;
|
||||
Object.entries(answer).forEach(([key,value]) => {
|
||||
if (value != null && value != "") {
|
||||
document.getElementById(`ans-${value}`).classList.remove("drag");
|
||||
if(key == value){
|
||||
// document.getElementById(`ask-${key}`).style.backgroundColor = "green";
|
||||
grade++;
|
||||
document.getElementById(`ans-${value}`).style.backgroundColor = "green";
|
||||
}else{
|
||||
// document.getElementById(`ask-${key}`).style.backgroundColor = "red";
|
||||
document.getElementById(`ans-${value}`).style.backgroundColor = "red";
|
||||
}
|
||||
}
|
||||
});
|
||||
setTimeout(()=>{
|
||||
if (grade == code.length) {
|
||||
alert("Поздравляю вы прошли уровень");
|
||||
console.log({theme:"<%= theme %>",lvl:"<%= lvl %>"});
|
||||
$.post("/finish/<%= theme %>/<%= lvl %>")
|
||||
.done(function( res ) {
|
||||
document.getElementsByClassName("check_btn")[0].setAttribute("onclick","")
|
||||
if("<%=lvl%>" != 5){
|
||||
let next_btn = document.createElement("button")
|
||||
next_btn.setAttribute("onclick",`goto('/<%= theme %>/<%= parseInt(lvl)+1 %>')`);
|
||||
next_btn.innerText = "следующий уровень";
|
||||
document.getElementsByClassName("header_btn3")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn3")[0].appendChild(next_btn);
|
||||
|
||||
let restart_btn = document.createElement("button")
|
||||
restart_btn.setAttribute("onclick","goto('')");
|
||||
restart_btn.innerText = "перезапустить";
|
||||
document.getElementsByClassName("header_btn2")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn2")[0].appendChild(restart_btn);
|
||||
}
|
||||
else{
|
||||
alert("Поздравляю вы прошли всю тему <%=theme_name%>");
|
||||
}
|
||||
})
|
||||
}
|
||||
else{
|
||||
alert("Вы не правильно выполнили задание");
|
||||
let restart_btn = document.createElement("button")
|
||||
restart_btn.setAttribute("onclick","goto('')");
|
||||
restart_btn.innerText = "перезапустить";
|
||||
document.getElementsByClassName("header_btn2")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn2")[0].appendChild(restart_btn);
|
||||
}
|
||||
},700)
|
||||
}
|
||||
else{
|
||||
alert("Сначала расставьте все строки")
|
||||
}
|
||||
}
|
||||
|
||||
interact('.dropzone').dropzone({
|
||||
overlap: 0.75,
|
||||
|
||||
ondropactivate: function (event) {
|
||||
// add active dropzone feedback
|
||||
event.target.classList.add('drop-active')
|
||||
},
|
||||
ondragenter: function (event) {
|
||||
var drag = event.relatedTarget
|
||||
var zone = event.target
|
||||
|
||||
// feedback the possibility of a drop
|
||||
zone.classList.add('drop-target')
|
||||
},
|
||||
ondragleave: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
// remove the drop feedback style
|
||||
// event.relatedTarget.classList.remove('can-drop')
|
||||
event.target.classList.remove('drop-target')
|
||||
// if(answer[zone.id.split("-").at(-1)] == drag.id.split("-").at(-1)){
|
||||
// answer[zone.id.split("-").at(-1)] = null
|
||||
// }
|
||||
|
||||
},
|
||||
ondrop: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
if (zone.children.length == 0) {
|
||||
zone.appendChild(drag)
|
||||
answer[zone.id.split("-").at(-1)] = drag.id.split("-").at(-1);
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
else{
|
||||
let child = zone.childNodes[0];
|
||||
let parent = drag.parentNode;
|
||||
if(zone.id.split("-").at(-1) != ""){
|
||||
answer[zone.id.split("-").at(-1)] = drag.id.split("-").at(-1);
|
||||
}
|
||||
if(parent.id.split("-").at(-1) != ""){
|
||||
answer[parent.id.split("-").at(-1)] = child.id.split("-").at(-1);
|
||||
}
|
||||
parent.appendChild(child)
|
||||
zone.appendChild(drag)
|
||||
setpos(0,0,child);
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
console.log(answer);
|
||||
|
||||
},
|
||||
ondropdeactivate: function (event) {
|
||||
event.target.classList.remove('drop-active')
|
||||
event.target.classList.remove('drop-target')
|
||||
}
|
||||
})
|
||||
|
||||
function dragMoveListener (event) {
|
||||
var target = event.target
|
||||
var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
|
||||
var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
|
||||
setpos(x,y,target);
|
||||
}
|
||||
|
||||
function setpos(x,y,obj) {
|
||||
obj.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
|
||||
obj.setAttribute('data-x', x)
|
||||
obj.setAttribute('data-y', y)
|
||||
}
|
||||
|
||||
// this function is used later in the resizing and gesture demos
|
||||
window.dragMoveListener = dragMoveListener
|
||||
|
||||
interact('.drag')
|
||||
.draggable({
|
||||
inertia: true,
|
||||
modifiers: [
|
||||
interact.modifiers.restrictRect({
|
||||
// restriction: 'parent',
|
||||
endOnly: true
|
||||
})
|
||||
],
|
||||
autoScroll: false,
|
||||
// dragMoveListener from the dragging demo above
|
||||
listeners: { move: dragMoveListener }
|
||||
})
|
||||
</script>
|
||||
|
||||
<%- include('../static/end.ejs') %>
|
||||
311
views/old/consecution/lvl-3.ejs
Executable file
311
views/old/consecution/lvl-3.ejs
Executable file
@ -0,0 +1,311 @@
|
||||
<%- include('../static/start.ejs') %>
|
||||
<style>
|
||||
.dropzone {
|
||||
background-color: #bfe4ff;
|
||||
border: dashed 4px transparent;
|
||||
border-radius: 4px;
|
||||
/* margin: 10px auto 10px; */
|
||||
/* padding: 10px; */
|
||||
padding: 5px;
|
||||
width: 50vw;
|
||||
min-height: 50px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.drop-active {
|
||||
border-color: #aaa;
|
||||
}
|
||||
|
||||
.drop-target {
|
||||
background-color: #29e;
|
||||
border-color: #fff;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.drag-drop {
|
||||
/* display: inline-block; */
|
||||
min-width: 40px;
|
||||
/* height: 15px; */
|
||||
padding: 5px;
|
||||
|
||||
/* padding: 2em 0.5em; */
|
||||
/* margin: 1rem 0 0 1rem; */
|
||||
|
||||
color: #fff;
|
||||
background-color: #29e;
|
||||
border: solid 2px #fff;
|
||||
|
||||
touch-action: none;
|
||||
transform: translate(0px, 0px);
|
||||
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.drag-drop.can-drop {
|
||||
color: #000;
|
||||
background-color: #4e4;
|
||||
}
|
||||
.code_vars li{
|
||||
/* display: inline-table; */
|
||||
width: max-content;
|
||||
max-width: 280px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<%
|
||||
task = "Написать программу, которая подсчитывает: расстояние между точками с координатами а, b и с, d";
|
||||
code ="let A = Math.pow((a-c),2) /%"+
|
||||
"let B = Math.pow((b-d),2) /%"+
|
||||
"let AB = Math.sqrt(A+B) /%"+
|
||||
"return `расстояние между точками равно ${AB}`;"
|
||||
%>
|
||||
|
||||
<%- include('../static/header.ejs') %>
|
||||
<section class="main">
|
||||
<div class="main-top" style="display: flex;">
|
||||
<div class="code_space" style="width: 100vw;"></div>
|
||||
<ul class="code_vars" style="border: 1px #29e solid;max-width: 300px; display: block;width: -webkit-fill-available;"></ul>
|
||||
</div>
|
||||
<div class="main-bottom" style="display: block;margin-top: 20px;">
|
||||
<div class="task" style="margin-bottom: 20px;"><b>Задача: </b> <%= task %></div>
|
||||
<div style="display: flex; justify-content: space-around;">
|
||||
<button class="check_btn" onclick="check_task()">проверить</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
// function get_lvl(callback){
|
||||
// fetch("/lvls/<%=theme%>/<%=lvl%>.txt")
|
||||
// .then((response) => {
|
||||
// return response.text();
|
||||
// })
|
||||
// .then((data) => {
|
||||
// callback(data);
|
||||
// })
|
||||
// }
|
||||
|
||||
function check_next() {
|
||||
$.post("/check/<%= theme %>/<%= lvl %>")
|
||||
.done(function( res ) {
|
||||
console.log(res["body"]);
|
||||
if(res["body"] == true){
|
||||
if("<%=lvl%>" != 5){
|
||||
let next_btn = document.createElement("button")
|
||||
next_btn.setAttribute("onclick",`goto('/<%= theme %>/<%= parseInt(lvl)+1 %>')`);
|
||||
next_btn.innerText = "следующий уровень";
|
||||
document.getElementsByClassName("header_btn3")[0].appendChild(next_btn);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
check_next()
|
||||
let answer = {};
|
||||
let code = [];
|
||||
show_task();
|
||||
|
||||
function show_task() {
|
||||
code = "<%-code%>".split("/%");
|
||||
Object.entries(code).forEach(([key,value]) => {
|
||||
code[key] = value.replace("_%","\n");
|
||||
});
|
||||
|
||||
let arr = [];
|
||||
Object.entries(code).forEach(([key,value]) => {
|
||||
// console.log(key,value);
|
||||
let new_obj = document.createElement("li");
|
||||
new_obj.id = `ans-${key}`;
|
||||
new_obj.classList.add("drag-drop");
|
||||
new_obj.classList.add("drag");
|
||||
new_obj.innerText = value;
|
||||
|
||||
let ask_obj = document.createElement("div");
|
||||
ask_obj.id = `ask-${key}`;
|
||||
ask_obj.classList.add(`dropzone`);
|
||||
|
||||
arr.push(new_obj);
|
||||
console.log(arr);
|
||||
// document.getElementsByClassName("code_vars")[0].appendChild(new_obj);
|
||||
document.getElementsByClassName("code_space")[0].appendChild(ask_obj);
|
||||
answer[key] = null
|
||||
});
|
||||
|
||||
Object.entries(shuffle_array(arr)).forEach(([key,value]) => {
|
||||
document.getElementsByClassName("code_vars")[0].appendChild(value);
|
||||
});
|
||||
}
|
||||
|
||||
function shuffle_array(array) {
|
||||
var currentIndex = array.length, temporaryValue, randomIndex;
|
||||
|
||||
while (0 !== currentIndex) {
|
||||
|
||||
randomIndex = Math.floor(Math.random() * currentIndex);
|
||||
currentIndex -= 1;
|
||||
|
||||
temporaryValue = array[currentIndex];
|
||||
array[currentIndex] = array[randomIndex];
|
||||
array[randomIndex] = temporaryValue;
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
interact('.main').dropzone({
|
||||
overlap: 0.75,
|
||||
|
||||
ondrop: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
if(drag.parentNode.id.split("-").at(-1) != ""){
|
||||
answer[drag.parentNode.id.split("-").at(-1)] = null
|
||||
}
|
||||
document.getElementsByClassName("code_vars")[0].appendChild(drag)
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
})
|
||||
|
||||
function check_task() {
|
||||
if(!Object.values(answer).includes(null)){
|
||||
let grade = 0;
|
||||
Object.entries(answer).forEach(([key,value]) => {
|
||||
if (value != null && value != "") {
|
||||
document.getElementById(`ans-${value}`).classList.remove("drag");
|
||||
if(key == value){
|
||||
// document.getElementById(`ask-${key}`).style.backgroundColor = "green";
|
||||
grade++;
|
||||
document.getElementById(`ans-${value}`).style.backgroundColor = "green";
|
||||
}else{
|
||||
// document.getElementById(`ask-${key}`).style.backgroundColor = "red";
|
||||
document.getElementById(`ans-${value}`).style.backgroundColor = "red";
|
||||
}
|
||||
}
|
||||
});
|
||||
setTimeout(()=>{
|
||||
if (grade == code.length) {
|
||||
alert("Поздравляю вы прошли уровень");
|
||||
console.log({theme:"<%= theme %>",lvl:"<%= lvl %>"});
|
||||
$.post("/finish/<%= theme %>/<%= lvl %>")
|
||||
.done(function( res ) {
|
||||
document.getElementsByClassName("check_btn")[0].setAttribute("onclick","")
|
||||
if("<%=lvl%>" != 5){
|
||||
let next_btn = document.createElement("button")
|
||||
next_btn.setAttribute("onclick",`goto('/<%= theme %>/<%= parseInt(lvl)+1 %>')`);
|
||||
next_btn.innerText = "следующий уровень";
|
||||
document.getElementsByClassName("header_btn3")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn3")[0].appendChild(next_btn);
|
||||
|
||||
let restart_btn = document.createElement("button")
|
||||
restart_btn.setAttribute("onclick","goto('')");
|
||||
restart_btn.innerText = "перезапустить";
|
||||
document.getElementsByClassName("header_btn2")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn2")[0].appendChild(restart_btn);
|
||||
}
|
||||
else{
|
||||
alert("Поздравляю вы прошли всю тему <%=theme_name%>");
|
||||
}
|
||||
})
|
||||
}
|
||||
else{
|
||||
alert("Вы не правильно выполнили задание");
|
||||
let restart_btn = document.createElement("button")
|
||||
restart_btn.setAttribute("onclick","goto('')");
|
||||
restart_btn.innerText = "перезапустить";
|
||||
document.getElementsByClassName("header_btn2")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn2")[0].appendChild(restart_btn);
|
||||
}
|
||||
},700)
|
||||
}
|
||||
else{
|
||||
alert("Сначала расставьте все строки")
|
||||
}
|
||||
}
|
||||
|
||||
interact('.dropzone').dropzone({
|
||||
overlap: 0.75,
|
||||
|
||||
ondropactivate: function (event) {
|
||||
// add active dropzone feedback
|
||||
event.target.classList.add('drop-active')
|
||||
},
|
||||
ondragenter: function (event) {
|
||||
var drag = event.relatedTarget
|
||||
var zone = event.target
|
||||
|
||||
// feedback the possibility of a drop
|
||||
zone.classList.add('drop-target')
|
||||
},
|
||||
ondragleave: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
// remove the drop feedback style
|
||||
// event.relatedTarget.classList.remove('can-drop')
|
||||
event.target.classList.remove('drop-target')
|
||||
// if(answer[zone.id.split("-").at(-1)] == drag.id.split("-").at(-1)){
|
||||
// answer[zone.id.split("-").at(-1)] = null
|
||||
// }
|
||||
|
||||
},
|
||||
ondrop: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
if (zone.children.length == 0) {
|
||||
zone.appendChild(drag)
|
||||
answer[zone.id.split("-").at(-1)] = drag.id.split("-").at(-1);
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
else{
|
||||
let child = zone.childNodes[0];
|
||||
let parent = drag.parentNode;
|
||||
if(zone.id.split("-").at(-1) != ""){
|
||||
answer[zone.id.split("-").at(-1)] = drag.id.split("-").at(-1);
|
||||
}
|
||||
if(parent.id.split("-").at(-1) != ""){
|
||||
answer[parent.id.split("-").at(-1)] = child.id.split("-").at(-1);
|
||||
}
|
||||
parent.appendChild(child)
|
||||
zone.appendChild(drag)
|
||||
setpos(0,0,child);
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
console.log(answer);
|
||||
|
||||
},
|
||||
ondropdeactivate: function (event) {
|
||||
event.target.classList.remove('drop-active')
|
||||
event.target.classList.remove('drop-target')
|
||||
}
|
||||
})
|
||||
|
||||
function dragMoveListener (event) {
|
||||
var target = event.target
|
||||
var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
|
||||
var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
|
||||
setpos(x,y,target);
|
||||
}
|
||||
|
||||
function setpos(x,y,obj) {
|
||||
obj.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
|
||||
obj.setAttribute('data-x', x)
|
||||
obj.setAttribute('data-y', y)
|
||||
}
|
||||
|
||||
// this function is used later in the resizing and gesture demos
|
||||
window.dragMoveListener = dragMoveListener
|
||||
|
||||
interact('.drag')
|
||||
.draggable({
|
||||
inertia: true,
|
||||
modifiers: [
|
||||
interact.modifiers.restrictRect({
|
||||
// restriction: 'parent',
|
||||
endOnly: true
|
||||
})
|
||||
],
|
||||
autoScroll: false,
|
||||
// dragMoveListener from the dragging demo above
|
||||
listeners: { move: dragMoveListener }
|
||||
})
|
||||
</script>
|
||||
|
||||
<%- include('../static/end.ejs') %>
|
||||
311
views/old/consecution/lvl-4.ejs
Executable file
311
views/old/consecution/lvl-4.ejs
Executable file
@ -0,0 +1,311 @@
|
||||
<%- include('../static/start.ejs') %>
|
||||
<style>
|
||||
.dropzone {
|
||||
background-color: #bfe4ff;
|
||||
border: dashed 4px transparent;
|
||||
border-radius: 4px;
|
||||
/* margin: 10px auto 10px; */
|
||||
/* padding: 10px; */
|
||||
padding: 5px;
|
||||
width: 50vw;
|
||||
min-height: 50px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.drop-active {
|
||||
border-color: #aaa;
|
||||
}
|
||||
|
||||
.drop-target {
|
||||
background-color: #29e;
|
||||
border-color: #fff;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.drag-drop {
|
||||
/* display: inline-block; */
|
||||
min-width: 40px;
|
||||
/* height: 15px; */
|
||||
padding: 5px;
|
||||
|
||||
/* padding: 2em 0.5em; */
|
||||
/* margin: 1rem 0 0 1rem; */
|
||||
|
||||
color: #fff;
|
||||
background-color: #29e;
|
||||
border: solid 2px #fff;
|
||||
|
||||
touch-action: none;
|
||||
transform: translate(0px, 0px);
|
||||
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.drag-drop.can-drop {
|
||||
color: #000;
|
||||
background-color: #4e4;
|
||||
}
|
||||
.code_vars li{
|
||||
/* display: inline-table; */
|
||||
width: max-content;
|
||||
max-width: 280px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<%
|
||||
task = "Написать программу, которая подсчитывает: среднее арифметическое кубов двух чисел a и b";
|
||||
code ="let a = a*a*a; /%"+
|
||||
"let b = b*b*b; /%"+
|
||||
"let awg = ((a+b)/2); /%"+
|
||||
"return `среднее арифметическое кубов двух чисел равна ${awg}`;"
|
||||
%>
|
||||
|
||||
<%- include('../static/header.ejs') %>
|
||||
<section class="main">
|
||||
<div class="main-top" style="display: flex;">
|
||||
<div class="code_space" style="width: 100vw;"></div>
|
||||
<ul class="code_vars" style="border: 1px #29e solid;max-width: 300px; display: block;width: -webkit-fill-available;"></ul>
|
||||
</div>
|
||||
<div class="main-bottom" style="display: block;margin-top: 20px;">
|
||||
<div class="task" style="margin-bottom: 20px;"><b>Задача: </b> <%= task %></div>
|
||||
<div style="display: flex; justify-content: space-around;">
|
||||
<button class="check_btn" onclick="check_task()">проверить</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
// function get_lvl(callback){
|
||||
// fetch("/lvls/<%=theme%>/<%=lvl%>.txt")
|
||||
// .then((response) => {
|
||||
// return response.text();
|
||||
// })
|
||||
// .then((data) => {
|
||||
// callback(data);
|
||||
// })
|
||||
// }
|
||||
|
||||
function check_next() {
|
||||
$.post("/check/<%= theme %>/<%= lvl %>")
|
||||
.done(function( res ) {
|
||||
console.log(res["body"]);
|
||||
if(res["body"] == true){
|
||||
if("<%=lvl%>" != 5){
|
||||
let next_btn = document.createElement("button")
|
||||
next_btn.setAttribute("onclick",`goto('/<%= theme %>/<%= parseInt(lvl)+1 %>')`);
|
||||
next_btn.innerText = "следующий уровень";
|
||||
document.getElementsByClassName("header_btn3")[0].appendChild(next_btn);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
check_next()
|
||||
let answer = {};
|
||||
let code = [];
|
||||
show_task();
|
||||
|
||||
function show_task() {
|
||||
code = "<%-code%>".split("/%");
|
||||
Object.entries(code).forEach(([key,value]) => {
|
||||
code[key] = value.replace("_%","\n");
|
||||
});
|
||||
|
||||
let arr = [];
|
||||
Object.entries(code).forEach(([key,value]) => {
|
||||
// console.log(key,value);
|
||||
let new_obj = document.createElement("li");
|
||||
new_obj.id = `ans-${key}`;
|
||||
new_obj.classList.add("drag-drop");
|
||||
new_obj.classList.add("drag");
|
||||
new_obj.innerText = value;
|
||||
|
||||
let ask_obj = document.createElement("div");
|
||||
ask_obj.id = `ask-${key}`;
|
||||
ask_obj.classList.add(`dropzone`);
|
||||
|
||||
arr.push(new_obj);
|
||||
console.log(arr);
|
||||
// document.getElementsByClassName("code_vars")[0].appendChild(new_obj);
|
||||
document.getElementsByClassName("code_space")[0].appendChild(ask_obj);
|
||||
answer[key] = null
|
||||
});
|
||||
|
||||
Object.entries(shuffle_array(arr)).forEach(([key,value]) => {
|
||||
document.getElementsByClassName("code_vars")[0].appendChild(value);
|
||||
});
|
||||
}
|
||||
|
||||
function shuffle_array(array) {
|
||||
var currentIndex = array.length, temporaryValue, randomIndex;
|
||||
|
||||
while (0 !== currentIndex) {
|
||||
|
||||
randomIndex = Math.floor(Math.random() * currentIndex);
|
||||
currentIndex -= 1;
|
||||
|
||||
temporaryValue = array[currentIndex];
|
||||
array[currentIndex] = array[randomIndex];
|
||||
array[randomIndex] = temporaryValue;
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
interact('.main').dropzone({
|
||||
overlap: 0.75,
|
||||
|
||||
ondrop: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
if(drag.parentNode.id.split("-").at(-1) != ""){
|
||||
answer[drag.parentNode.id.split("-").at(-1)] = null
|
||||
}
|
||||
document.getElementsByClassName("code_vars")[0].appendChild(drag)
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
})
|
||||
|
||||
function check_task() {
|
||||
if(!Object.values(answer).includes(null)){
|
||||
let grade = 0;
|
||||
Object.entries(answer).forEach(([key,value]) => {
|
||||
if (value != null && value != "") {
|
||||
document.getElementById(`ans-${value}`).classList.remove("drag");
|
||||
if(key == value){
|
||||
// document.getElementById(`ask-${key}`).style.backgroundColor = "green";
|
||||
grade++;
|
||||
document.getElementById(`ans-${value}`).style.backgroundColor = "green";
|
||||
}else{
|
||||
// document.getElementById(`ask-${key}`).style.backgroundColor = "red";
|
||||
document.getElementById(`ans-${value}`).style.backgroundColor = "red";
|
||||
}
|
||||
}
|
||||
});
|
||||
setTimeout(()=>{
|
||||
if (grade == code.length) {
|
||||
alert("Поздравляю вы прошли уровень");
|
||||
console.log({theme:"<%= theme %>",lvl:"<%= lvl %>"});
|
||||
$.post("/finish/<%= theme %>/<%= lvl %>")
|
||||
.done(function( res ) {
|
||||
document.getElementsByClassName("check_btn")[0].setAttribute("onclick","")
|
||||
if("<%=lvl%>" != 5){
|
||||
let next_btn = document.createElement("button")
|
||||
next_btn.setAttribute("onclick",`goto('/<%= theme %>/<%= parseInt(lvl)+1 %>')`);
|
||||
next_btn.innerText = "следующий уровень";
|
||||
document.getElementsByClassName("header_btn3")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn3")[0].appendChild(next_btn);
|
||||
|
||||
let restart_btn = document.createElement("button")
|
||||
restart_btn.setAttribute("onclick","goto('')");
|
||||
restart_btn.innerText = "перезапустить";
|
||||
document.getElementsByClassName("header_btn2")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn2")[0].appendChild(restart_btn);
|
||||
}
|
||||
else{
|
||||
alert("Поздравляю вы прошли всю тему <%=theme_name%>");
|
||||
}
|
||||
})
|
||||
}
|
||||
else{
|
||||
alert("Вы не правильно выполнили задание");
|
||||
let restart_btn = document.createElement("button")
|
||||
restart_btn.setAttribute("onclick","goto('')");
|
||||
restart_btn.innerText = "перезапустить";
|
||||
document.getElementsByClassName("header_btn2")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn2")[0].appendChild(restart_btn);
|
||||
}
|
||||
},700)
|
||||
}
|
||||
else{
|
||||
alert("Сначала расставьте все строки")
|
||||
}
|
||||
}
|
||||
|
||||
interact('.dropzone').dropzone({
|
||||
overlap: 0.75,
|
||||
|
||||
ondropactivate: function (event) {
|
||||
// add active dropzone feedback
|
||||
event.target.classList.add('drop-active')
|
||||
},
|
||||
ondragenter: function (event) {
|
||||
var drag = event.relatedTarget
|
||||
var zone = event.target
|
||||
|
||||
// feedback the possibility of a drop
|
||||
zone.classList.add('drop-target')
|
||||
},
|
||||
ondragleave: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
// remove the drop feedback style
|
||||
// event.relatedTarget.classList.remove('can-drop')
|
||||
event.target.classList.remove('drop-target')
|
||||
// if(answer[zone.id.split("-").at(-1)] == drag.id.split("-").at(-1)){
|
||||
// answer[zone.id.split("-").at(-1)] = null
|
||||
// }
|
||||
|
||||
},
|
||||
ondrop: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
if (zone.children.length == 0) {
|
||||
zone.appendChild(drag)
|
||||
answer[zone.id.split("-").at(-1)] = drag.id.split("-").at(-1);
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
else{
|
||||
let child = zone.childNodes[0];
|
||||
let parent = drag.parentNode;
|
||||
if(zone.id.split("-").at(-1) != ""){
|
||||
answer[zone.id.split("-").at(-1)] = drag.id.split("-").at(-1);
|
||||
}
|
||||
if(parent.id.split("-").at(-1) != ""){
|
||||
answer[parent.id.split("-").at(-1)] = child.id.split("-").at(-1);
|
||||
}
|
||||
parent.appendChild(child)
|
||||
zone.appendChild(drag)
|
||||
setpos(0,0,child);
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
console.log(answer);
|
||||
|
||||
},
|
||||
ondropdeactivate: function (event) {
|
||||
event.target.classList.remove('drop-active')
|
||||
event.target.classList.remove('drop-target')
|
||||
}
|
||||
})
|
||||
|
||||
function dragMoveListener (event) {
|
||||
var target = event.target
|
||||
var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
|
||||
var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
|
||||
setpos(x,y,target);
|
||||
}
|
||||
|
||||
function setpos(x,y,obj) {
|
||||
obj.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
|
||||
obj.setAttribute('data-x', x)
|
||||
obj.setAttribute('data-y', y)
|
||||
}
|
||||
|
||||
// this function is used later in the resizing and gesture demos
|
||||
window.dragMoveListener = dragMoveListener
|
||||
|
||||
interact('.drag')
|
||||
.draggable({
|
||||
inertia: true,
|
||||
modifiers: [
|
||||
interact.modifiers.restrictRect({
|
||||
// restriction: 'parent',
|
||||
endOnly: true
|
||||
})
|
||||
],
|
||||
autoScroll: false,
|
||||
// dragMoveListener from the dragging demo above
|
||||
listeners: { move: dragMoveListener }
|
||||
})
|
||||
</script>
|
||||
|
||||
<%- include('../static/end.ejs') %>
|
||||
311
views/old/consecution/lvl-5.ejs
Executable file
311
views/old/consecution/lvl-5.ejs
Executable file
@ -0,0 +1,311 @@
|
||||
<%- include('../static/start.ejs') %>
|
||||
<style>
|
||||
.dropzone {
|
||||
background-color: #bfe4ff;
|
||||
border: dashed 4px transparent;
|
||||
border-radius: 4px;
|
||||
/* margin: 10px auto 10px; */
|
||||
/* padding: 10px; */
|
||||
padding: 5px;
|
||||
width: 50vw;
|
||||
min-height: 50px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.drop-active {
|
||||
border-color: #aaa;
|
||||
}
|
||||
|
||||
.drop-target {
|
||||
background-color: #29e;
|
||||
border-color: #fff;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.drag-drop {
|
||||
/* display: inline-block; */
|
||||
min-width: 40px;
|
||||
/* height: 15px; */
|
||||
padding: 5px;
|
||||
|
||||
/* padding: 2em 0.5em; */
|
||||
/* margin: 1rem 0 0 1rem; */
|
||||
|
||||
color: #fff;
|
||||
background-color: #29e;
|
||||
border: solid 2px #fff;
|
||||
|
||||
touch-action: none;
|
||||
transform: translate(0px, 0px);
|
||||
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.drag-drop.can-drop {
|
||||
color: #000;
|
||||
background-color: #4e4;
|
||||
}
|
||||
.code_vars li{
|
||||
/* display: inline-table; */
|
||||
width: max-content;
|
||||
max-width: 280px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<%
|
||||
task = "Написать программу, которая подсчитывает: среднее геометрическое модулей двух чисел a и b";
|
||||
code ="let a = Math.abs(a); /%"+
|
||||
"let b = Math.abs(b); /%"+
|
||||
"let awg_geo = Math.sqrt((a*b),2); /%"+
|
||||
"return `среднее геометрическое модулей двух чисел равно ${awg_geo}`;"
|
||||
%>
|
||||
|
||||
<%- include('../static/header.ejs') %>
|
||||
<section class="main">
|
||||
<div class="main-top" style="display: flex;">
|
||||
<div class="code_space" style="width: 100vw;"></div>
|
||||
<ul class="code_vars" style="border: 1px #29e solid;max-width: 300px; display: block;width: -webkit-fill-available;"></ul>
|
||||
</div>
|
||||
<div class="main-bottom" style="display: block;margin-top: 20px;">
|
||||
<div class="task" style="margin-bottom: 20px;"><b>Задача: </b> <%= task %></div>
|
||||
<div style="display: flex; justify-content: space-around;">
|
||||
<button class="check_btn" onclick="check_task()">проверить</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
// function get_lvl(callback){
|
||||
// fetch("/lvls/<%=theme%>/<%=lvl%>.txt")
|
||||
// .then((response) => {
|
||||
// return response.text();
|
||||
// })
|
||||
// .then((data) => {
|
||||
// callback(data);
|
||||
// })
|
||||
// }
|
||||
|
||||
function check_next() {
|
||||
$.post("/check/<%= theme %>/<%= lvl %>")
|
||||
.done(function( res ) {
|
||||
console.log(res["body"]);
|
||||
if(res["body"] == true){
|
||||
if("<%=lvl%>" != 5){
|
||||
let next_btn = document.createElement("button")
|
||||
next_btn.setAttribute("onclick",`goto('/<%= theme %>/<%= parseInt(lvl)+1 %>')`);
|
||||
next_btn.innerText = "следующий уровень";
|
||||
document.getElementsByClassName("header_btn3")[0].appendChild(next_btn);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
check_next()
|
||||
let answer = {};
|
||||
let code = [];
|
||||
show_task();
|
||||
|
||||
function show_task() {
|
||||
code = "<%-code%>".split("/%");
|
||||
Object.entries(code).forEach(([key,value]) => {
|
||||
code[key] = value.replace("_%","\n");
|
||||
});
|
||||
|
||||
let arr = [];
|
||||
Object.entries(code).forEach(([key,value]) => {
|
||||
// console.log(key,value);
|
||||
let new_obj = document.createElement("li");
|
||||
new_obj.id = `ans-${key}`;
|
||||
new_obj.classList.add("drag-drop");
|
||||
new_obj.classList.add("drag");
|
||||
new_obj.innerText = value;
|
||||
|
||||
let ask_obj = document.createElement("div");
|
||||
ask_obj.id = `ask-${key}`;
|
||||
ask_obj.classList.add(`dropzone`);
|
||||
|
||||
arr.push(new_obj);
|
||||
console.log(arr);
|
||||
// document.getElementsByClassName("code_vars")[0].appendChild(new_obj);
|
||||
document.getElementsByClassName("code_space")[0].appendChild(ask_obj);
|
||||
answer[key] = null
|
||||
});
|
||||
|
||||
Object.entries(shuffle_array(arr)).forEach(([key,value]) => {
|
||||
document.getElementsByClassName("code_vars")[0].appendChild(value);
|
||||
});
|
||||
}
|
||||
|
||||
function shuffle_array(array) {
|
||||
var currentIndex = array.length, temporaryValue, randomIndex;
|
||||
|
||||
while (0 !== currentIndex) {
|
||||
|
||||
randomIndex = Math.floor(Math.random() * currentIndex);
|
||||
currentIndex -= 1;
|
||||
|
||||
temporaryValue = array[currentIndex];
|
||||
array[currentIndex] = array[randomIndex];
|
||||
array[randomIndex] = temporaryValue;
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
interact('.main').dropzone({
|
||||
overlap: 0.75,
|
||||
|
||||
ondrop: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
if(drag.parentNode.id.split("-").at(-1) != ""){
|
||||
answer[drag.parentNode.id.split("-").at(-1)] = null
|
||||
}
|
||||
document.getElementsByClassName("code_vars")[0].appendChild(drag)
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
})
|
||||
|
||||
function check_task() {
|
||||
if(!Object.values(answer).includes(null)){
|
||||
let grade = 0;
|
||||
Object.entries(answer).forEach(([key,value]) => {
|
||||
if (value != null && value != "") {
|
||||
document.getElementById(`ans-${value}`).classList.remove("drag");
|
||||
if(key == value){
|
||||
// document.getElementById(`ask-${key}`).style.backgroundColor = "green";
|
||||
grade++;
|
||||
document.getElementById(`ans-${value}`).style.backgroundColor = "green";
|
||||
}else{
|
||||
// document.getElementById(`ask-${key}`).style.backgroundColor = "red";
|
||||
document.getElementById(`ans-${value}`).style.backgroundColor = "red";
|
||||
}
|
||||
}
|
||||
});
|
||||
setTimeout(()=>{
|
||||
if (grade == code.length) {
|
||||
alert("Поздравляю вы прошли уровень");
|
||||
console.log({theme:"<%= theme %>",lvl:"<%= lvl %>"});
|
||||
$.post("/finish/<%= theme %>/<%= lvl %>")
|
||||
.done(function( res ) {
|
||||
document.getElementsByClassName("check_btn")[0].setAttribute("onclick","")
|
||||
if("<%=lvl%>" != 5){
|
||||
let next_btn = document.createElement("button")
|
||||
next_btn.setAttribute("onclick",`goto('/<%= theme %>/<%= parseInt(lvl)+1 %>')`);
|
||||
next_btn.innerText = "следующий уровень";
|
||||
document.getElementsByClassName("header_btn3")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn3")[0].appendChild(next_btn);
|
||||
|
||||
let restart_btn = document.createElement("button")
|
||||
restart_btn.setAttribute("onclick","goto('')");
|
||||
restart_btn.innerText = "перезапустить";
|
||||
document.getElementsByClassName("header_btn2")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn2")[0].appendChild(restart_btn);
|
||||
}
|
||||
else{
|
||||
alert("Поздравляю вы прошли всю тему <%=theme_name%>");
|
||||
}
|
||||
})
|
||||
}
|
||||
else{
|
||||
alert("Вы не правильно выполнили задание");
|
||||
let restart_btn = document.createElement("button")
|
||||
restart_btn.setAttribute("onclick","goto('')");
|
||||
restart_btn.innerText = "перезапустить";
|
||||
document.getElementsByClassName("header_btn2")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn2")[0].appendChild(restart_btn);
|
||||
}
|
||||
},700)
|
||||
}
|
||||
else{
|
||||
alert("Сначала расставьте все строки")
|
||||
}
|
||||
}
|
||||
|
||||
interact('.dropzone').dropzone({
|
||||
overlap: 0.75,
|
||||
|
||||
ondropactivate: function (event) {
|
||||
// add active dropzone feedback
|
||||
event.target.classList.add('drop-active')
|
||||
},
|
||||
ondragenter: function (event) {
|
||||
var drag = event.relatedTarget
|
||||
var zone = event.target
|
||||
|
||||
// feedback the possibility of a drop
|
||||
zone.classList.add('drop-target')
|
||||
},
|
||||
ondragleave: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
// remove the drop feedback style
|
||||
// event.relatedTarget.classList.remove('can-drop')
|
||||
event.target.classList.remove('drop-target')
|
||||
// if(answer[zone.id.split("-").at(-1)] == drag.id.split("-").at(-1)){
|
||||
// answer[zone.id.split("-").at(-1)] = null
|
||||
// }
|
||||
|
||||
},
|
||||
ondrop: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
if (zone.children.length == 0) {
|
||||
zone.appendChild(drag)
|
||||
answer[zone.id.split("-").at(-1)] = drag.id.split("-").at(-1);
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
else{
|
||||
let child = zone.childNodes[0];
|
||||
let parent = drag.parentNode;
|
||||
if(zone.id.split("-").at(-1) != ""){
|
||||
answer[zone.id.split("-").at(-1)] = drag.id.split("-").at(-1);
|
||||
}
|
||||
if(parent.id.split("-").at(-1) != ""){
|
||||
answer[parent.id.split("-").at(-1)] = child.id.split("-").at(-1);
|
||||
}
|
||||
parent.appendChild(child)
|
||||
zone.appendChild(drag)
|
||||
setpos(0,0,child);
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
console.log(answer);
|
||||
|
||||
},
|
||||
ondropdeactivate: function (event) {
|
||||
event.target.classList.remove('drop-active')
|
||||
event.target.classList.remove('drop-target')
|
||||
}
|
||||
})
|
||||
|
||||
function dragMoveListener (event) {
|
||||
var target = event.target
|
||||
var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
|
||||
var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
|
||||
setpos(x,y,target);
|
||||
}
|
||||
|
||||
function setpos(x,y,obj) {
|
||||
obj.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
|
||||
obj.setAttribute('data-x', x)
|
||||
obj.setAttribute('data-y', y)
|
||||
}
|
||||
|
||||
// this function is used later in the resizing and gesture demos
|
||||
window.dragMoveListener = dragMoveListener
|
||||
|
||||
interact('.drag')
|
||||
.draggable({
|
||||
inertia: true,
|
||||
modifiers: [
|
||||
interact.modifiers.restrictRect({
|
||||
// restriction: 'parent',
|
||||
endOnly: true
|
||||
})
|
||||
],
|
||||
autoScroll: false,
|
||||
// dragMoveListener from the dragging demo above
|
||||
listeners: { move: dragMoveListener }
|
||||
})
|
||||
</script>
|
||||
|
||||
<%- include('../static/end.ejs') %>
|
||||
312
views/old/looping/lvl-1.ejs
Executable file
312
views/old/looping/lvl-1.ejs
Executable file
@ -0,0 +1,312 @@
|
||||
<%- include('../static/start.ejs') %>
|
||||
<style>
|
||||
.dropzone {
|
||||
background-color: #bfe4ff;
|
||||
border: dashed 4px transparent;
|
||||
border-radius: 4px;
|
||||
/* margin: 10px auto 10px; */
|
||||
/* padding: 10px; */
|
||||
padding: 5px;
|
||||
width: 50vw;
|
||||
min-height: 50px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.drop-active {
|
||||
border-color: #aaa;
|
||||
}
|
||||
|
||||
.drop-target {
|
||||
background-color: #29e;
|
||||
border-color: #fff;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.drag-drop {
|
||||
/* display: inline-block; */
|
||||
min-width: 40px;
|
||||
/* height: 15px; */
|
||||
padding: 5px;
|
||||
|
||||
/* padding: 2em 0.5em; */
|
||||
/* margin: 1rem 0 0 1rem; */
|
||||
|
||||
color: #fff;
|
||||
background-color: #29e;
|
||||
border: solid 2px #fff;
|
||||
|
||||
touch-action: none;
|
||||
transform: translate(0px, 0px);
|
||||
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.drag-drop.can-drop {
|
||||
color: #000;
|
||||
background-color: #4e4;
|
||||
}
|
||||
.code_vars li{
|
||||
/* display: inline-table; */
|
||||
width: max-content;
|
||||
max-width: 280px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<%
|
||||
task = 'Известна масса каждого из 12 предметов. Определить общую массу всего набора предметов.';
|
||||
code ="let mas = [12, 25.2, 125, 23.1, 16.3, 82, 2, 8, 64, 12.7, 72.1, 7]; /%"+
|
||||
"let sum = 0; /%"+
|
||||
"for(let i = 0; i < 12; i++) _% { /%"+
|
||||
"sum += mas[i]; _% } /%"+
|
||||
"return sum;"
|
||||
%>
|
||||
|
||||
<%- include('../static/header.ejs') %>
|
||||
<section class="main">
|
||||
<div class="main-top" style="display: flex;">
|
||||
<div class="code_space" style="width: 100vw;"></div>
|
||||
<ul class="code_vars" style="border: 1px #29e solid;max-width: 300px; display: block;width: -webkit-fill-available;"></ul>
|
||||
</div>
|
||||
<div class="main-bottom" style="display: block;margin-top: 20px;">
|
||||
<div class="task" style="margin-bottom: 20px;"><b>Задача: </b> <%= task %></div>
|
||||
<div style="display: flex; justify-content: space-around;">
|
||||
<button class="check_btn" onclick="check_task()">проверить</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
// function get_lvl(callback){
|
||||
// fetch("/lvls/<%=theme%>/<%=lvl%>.txt")
|
||||
// .then((response) => {
|
||||
// return response.text();
|
||||
// })
|
||||
// .then((data) => {
|
||||
// callback(data);
|
||||
// })
|
||||
// }
|
||||
|
||||
function check_next() {
|
||||
$.post("/check/<%= theme %>/<%= lvl %>")
|
||||
.done(function( res ) {
|
||||
console.log(res["body"]);
|
||||
if(res["body"] == true){
|
||||
if("<%=lvl%>" != 5){
|
||||
let next_btn = document.createElement("button")
|
||||
next_btn.setAttribute("onclick",`goto('/<%= theme %>/<%= parseInt(lvl)+1 %>')`);
|
||||
next_btn.innerText = "следующий уровень";
|
||||
document.getElementsByClassName("header_btn3")[0].appendChild(next_btn);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
check_next()
|
||||
let answer = {};
|
||||
let code = [];
|
||||
show_task();
|
||||
|
||||
function show_task() {
|
||||
code = "<%-code%>".split("/%");
|
||||
Object.entries(code).forEach(([key,value]) => {
|
||||
code[key] = value.replace("_%","\n");
|
||||
});
|
||||
|
||||
let arr = [];
|
||||
Object.entries(code).forEach(([key,value]) => {
|
||||
// console.log(key,value);
|
||||
let new_obj = document.createElement("li");
|
||||
new_obj.id = `ans-${key}`;
|
||||
new_obj.classList.add("drag-drop");
|
||||
new_obj.classList.add("drag");
|
||||
new_obj.innerText = value;
|
||||
|
||||
let ask_obj = document.createElement("div");
|
||||
ask_obj.id = `ask-${key}`;
|
||||
ask_obj.classList.add(`dropzone`);
|
||||
|
||||
arr.push(new_obj);
|
||||
console.log(arr);
|
||||
// document.getElementsByClassName("code_vars")[0].appendChild(new_obj);
|
||||
document.getElementsByClassName("code_space")[0].appendChild(ask_obj);
|
||||
answer[key] = null
|
||||
});
|
||||
|
||||
Object.entries(shuffle_array(arr)).forEach(([key,value]) => {
|
||||
document.getElementsByClassName("code_vars")[0].appendChild(value);
|
||||
});
|
||||
}
|
||||
|
||||
function shuffle_array(array) {
|
||||
var currentIndex = array.length, temporaryValue, randomIndex;
|
||||
|
||||
while (0 !== currentIndex) {
|
||||
|
||||
randomIndex = Math.floor(Math.random() * currentIndex);
|
||||
currentIndex -= 1;
|
||||
|
||||
temporaryValue = array[currentIndex];
|
||||
array[currentIndex] = array[randomIndex];
|
||||
array[randomIndex] = temporaryValue;
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
interact('.main').dropzone({
|
||||
overlap: 0.75,
|
||||
|
||||
ondrop: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
if(drag.parentNode.id.split("-").at(-1) != ""){
|
||||
answer[drag.parentNode.id.split("-").at(-1)] = null
|
||||
}
|
||||
document.getElementsByClassName("code_vars")[0].appendChild(drag)
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
})
|
||||
|
||||
function check_task() {
|
||||
if(!Object.values(answer).includes(null)){
|
||||
let grade = 0;
|
||||
Object.entries(answer).forEach(([key,value]) => {
|
||||
if (value != null && value != "") {
|
||||
document.getElementById(`ans-${value}`).classList.remove("drag");
|
||||
if(key == value){
|
||||
// document.getElementById(`ask-${key}`).style.backgroundColor = "green";
|
||||
grade++;
|
||||
document.getElementById(`ans-${value}`).style.backgroundColor = "green";
|
||||
}else{
|
||||
// document.getElementById(`ask-${key}`).style.backgroundColor = "red";
|
||||
document.getElementById(`ans-${value}`).style.backgroundColor = "red";
|
||||
}
|
||||
}
|
||||
});
|
||||
setTimeout(()=>{
|
||||
if (grade == code.length) {
|
||||
alert("Поздравляю вы прошли уровень");
|
||||
console.log({theme:"<%= theme %>",lvl:"<%= lvl %>"});
|
||||
$.post("/finish/<%= theme %>/<%= lvl %>")
|
||||
.done(function( res ) {
|
||||
document.getElementsByClassName("check_btn")[0].setAttribute("onclick","")
|
||||
if("<%=lvl%>" != 5){
|
||||
let next_btn = document.createElement("button")
|
||||
next_btn.setAttribute("onclick",`goto('/<%= theme %>/<%= parseInt(lvl)+1 %>')`);
|
||||
next_btn.innerText = "следующий уровень";
|
||||
document.getElementsByClassName("header_btn3")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn3")[0].appendChild(next_btn);
|
||||
|
||||
let restart_btn = document.createElement("button")
|
||||
restart_btn.setAttribute("onclick","goto('')");
|
||||
restart_btn.innerText = "перезапустить";
|
||||
document.getElementsByClassName("header_btn2")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn2")[0].appendChild(restart_btn);
|
||||
}
|
||||
else{
|
||||
alert("Поздравляю вы прошли всю тему <%=theme_name%>");
|
||||
}
|
||||
})
|
||||
}
|
||||
else{
|
||||
alert("Вы не правильно выполнили задание");
|
||||
let restart_btn = document.createElement("button")
|
||||
restart_btn.setAttribute("onclick","goto('')");
|
||||
restart_btn.innerText = "перезапустить";
|
||||
document.getElementsByClassName("header_btn2")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn2")[0].appendChild(restart_btn);
|
||||
}
|
||||
},700)
|
||||
}
|
||||
else{
|
||||
alert("Сначала расставьте все строки")
|
||||
}
|
||||
}
|
||||
|
||||
interact('.dropzone').dropzone({
|
||||
overlap: 0.75,
|
||||
|
||||
ondropactivate: function (event) {
|
||||
// add active dropzone feedback
|
||||
event.target.classList.add('drop-active')
|
||||
},
|
||||
ondragenter: function (event) {
|
||||
var drag = event.relatedTarget
|
||||
var zone = event.target
|
||||
|
||||
// feedback the possibility of a drop
|
||||
zone.classList.add('drop-target')
|
||||
},
|
||||
ondragleave: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
// remove the drop feedback style
|
||||
// event.relatedTarget.classList.remove('can-drop')
|
||||
event.target.classList.remove('drop-target')
|
||||
// if(answer[zone.id.split("-").at(-1)] == drag.id.split("-").at(-1)){
|
||||
// answer[zone.id.split("-").at(-1)] = null
|
||||
// }
|
||||
|
||||
},
|
||||
ondrop: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
if (zone.children.length == 0) {
|
||||
zone.appendChild(drag)
|
||||
answer[zone.id.split("-").at(-1)] = drag.id.split("-").at(-1);
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
else{
|
||||
let child = zone.childNodes[0];
|
||||
let parent = drag.parentNode;
|
||||
if(zone.id.split("-").at(-1) != ""){
|
||||
answer[zone.id.split("-").at(-1)] = drag.id.split("-").at(-1);
|
||||
}
|
||||
if(parent.id.split("-").at(-1) != ""){
|
||||
answer[parent.id.split("-").at(-1)] = child.id.split("-").at(-1);
|
||||
}
|
||||
parent.appendChild(child)
|
||||
zone.appendChild(drag)
|
||||
setpos(0,0,child);
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
console.log(answer);
|
||||
|
||||
},
|
||||
ondropdeactivate: function (event) {
|
||||
event.target.classList.remove('drop-active')
|
||||
event.target.classList.remove('drop-target')
|
||||
}
|
||||
})
|
||||
|
||||
function dragMoveListener (event) {
|
||||
var target = event.target
|
||||
var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
|
||||
var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
|
||||
setpos(x,y,target);
|
||||
}
|
||||
|
||||
function setpos(x,y,obj) {
|
||||
obj.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
|
||||
obj.setAttribute('data-x', x)
|
||||
obj.setAttribute('data-y', y)
|
||||
}
|
||||
|
||||
// this function is used later in the resizing and gesture demos
|
||||
window.dragMoveListener = dragMoveListener
|
||||
|
||||
interact('.drag')
|
||||
.draggable({
|
||||
inertia: true,
|
||||
modifiers: [
|
||||
interact.modifiers.restrictRect({
|
||||
// restriction: 'parent',
|
||||
endOnly: true
|
||||
})
|
||||
],
|
||||
autoScroll: false,
|
||||
// dragMoveListener from the dragging demo above
|
||||
listeners: { move: dragMoveListener }
|
||||
})
|
||||
</script>
|
||||
|
||||
<%- include('../static/end.ejs') %>
|
||||
312
views/old/looping/lvl-2.ejs
Executable file
312
views/old/looping/lvl-2.ejs
Executable file
@ -0,0 +1,312 @@
|
||||
<%- include('../static/start.ejs') %>
|
||||
<style>
|
||||
.dropzone {
|
||||
background-color: #bfe4ff;
|
||||
border: dashed 4px transparent;
|
||||
border-radius: 4px;
|
||||
/* margin: 10px auto 10px; */
|
||||
/* padding: 10px; */
|
||||
padding: 5px;
|
||||
width: 50vw;
|
||||
min-height: 50px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.drop-active {
|
||||
border-color: #aaa;
|
||||
}
|
||||
|
||||
.drop-target {
|
||||
background-color: #29e;
|
||||
border-color: #fff;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.drag-drop {
|
||||
/* display: inline-block; */
|
||||
min-width: 40px;
|
||||
/* height: 15px; */
|
||||
padding: 5px;
|
||||
|
||||
/* padding: 2em 0.5em; */
|
||||
/* margin: 1rem 0 0 1rem; */
|
||||
|
||||
color: #fff;
|
||||
background-color: #29e;
|
||||
border: solid 2px #fff;
|
||||
|
||||
touch-action: none;
|
||||
transform: translate(0px, 0px);
|
||||
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.drag-drop.can-drop {
|
||||
color: #000;
|
||||
background-color: #4e4;
|
||||
}
|
||||
.code_vars li{
|
||||
/* display: inline-table; */
|
||||
width: max-content;
|
||||
max-width: 280px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<%
|
||||
task = 'Известны оценки абитуриента на четырех экзаменах. Определить сумму набранных им баллов.';
|
||||
code ="let exams = [40,52,65,75]; /%"+
|
||||
"let sum = 0; /%"+
|
||||
"for(let i = 0; i < exams.length; i++) _% { /%"+
|
||||
"sum += exams[i]; _% } /%"+
|
||||
"return `сумму набранных баллов равна ${sum}`; _% }"
|
||||
%>
|
||||
|
||||
<%- include('../static/header.ejs') %>
|
||||
<section class="main">
|
||||
<div class="main-top" style="display: flex;">
|
||||
<div class="code_space" style="width: 100vw;"></div>
|
||||
<ul class="code_vars" style="border: 1px #29e solid;max-width: 300px; display: block;width: -webkit-fill-available;"></ul>
|
||||
</div>
|
||||
<div class="main-bottom" style="display: block;margin-top: 20px;">
|
||||
<div class="task" style="margin-bottom: 20px;"><b>Задача: </b> <%= task %></div>
|
||||
<div style="display: flex; justify-content: space-around;">
|
||||
<button class="check_btn" onclick="check_task()">проверить</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
// function get_lvl(callback){
|
||||
// fetch("/lvls/<%=theme%>/<%=lvl%>.txt")
|
||||
// .then((response) => {
|
||||
// return response.text();
|
||||
// })
|
||||
// .then((data) => {
|
||||
// callback(data);
|
||||
// })
|
||||
// }
|
||||
|
||||
function check_next() {
|
||||
$.post("/check/<%= theme %>/<%= lvl %>")
|
||||
.done(function( res ) {
|
||||
console.log(res["body"]);
|
||||
if(res["body"] == true){
|
||||
if("<%=lvl%>" != 5){
|
||||
let next_btn = document.createElement("button")
|
||||
next_btn.setAttribute("onclick",`goto('/<%= theme %>/<%= parseInt(lvl)+1 %>')`);
|
||||
next_btn.innerText = "следующий уровень";
|
||||
document.getElementsByClassName("header_btn3")[0].appendChild(next_btn);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
check_next()
|
||||
let answer = {};
|
||||
let code = [];
|
||||
show_task();
|
||||
|
||||
function show_task() {
|
||||
code = "<%-code%>".split("/%");
|
||||
Object.entries(code).forEach(([key,value]) => {
|
||||
code[key] = value.replace("_%","\n");
|
||||
});
|
||||
|
||||
let arr = [];
|
||||
Object.entries(code).forEach(([key,value]) => {
|
||||
// console.log(key,value);
|
||||
let new_obj = document.createElement("li");
|
||||
new_obj.id = `ans-${key}`;
|
||||
new_obj.classList.add("drag-drop");
|
||||
new_obj.classList.add("drag");
|
||||
new_obj.innerText = value;
|
||||
|
||||
let ask_obj = document.createElement("div");
|
||||
ask_obj.id = `ask-${key}`;
|
||||
ask_obj.classList.add(`dropzone`);
|
||||
|
||||
arr.push(new_obj);
|
||||
console.log(arr);
|
||||
// document.getElementsByClassName("code_vars")[0].appendChild(new_obj);
|
||||
document.getElementsByClassName("code_space")[0].appendChild(ask_obj);
|
||||
answer[key] = null
|
||||
});
|
||||
|
||||
Object.entries(shuffle_array(arr)).forEach(([key,value]) => {
|
||||
document.getElementsByClassName("code_vars")[0].appendChild(value);
|
||||
});
|
||||
}
|
||||
|
||||
function shuffle_array(array) {
|
||||
var currentIndex = array.length, temporaryValue, randomIndex;
|
||||
|
||||
while (0 !== currentIndex) {
|
||||
|
||||
randomIndex = Math.floor(Math.random() * currentIndex);
|
||||
currentIndex -= 1;
|
||||
|
||||
temporaryValue = array[currentIndex];
|
||||
array[currentIndex] = array[randomIndex];
|
||||
array[randomIndex] = temporaryValue;
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
interact('.main').dropzone({
|
||||
overlap: 0.75,
|
||||
|
||||
ondrop: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
if(drag.parentNode.id.split("-").at(-1) != ""){
|
||||
answer[drag.parentNode.id.split("-").at(-1)] = null
|
||||
}
|
||||
document.getElementsByClassName("code_vars")[0].appendChild(drag)
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
})
|
||||
|
||||
function check_task() {
|
||||
if(!Object.values(answer).includes(null)){
|
||||
let grade = 0;
|
||||
Object.entries(answer).forEach(([key,value]) => {
|
||||
if (value != null && value != "") {
|
||||
document.getElementById(`ans-${value}`).classList.remove("drag");
|
||||
if(key == value){
|
||||
// document.getElementById(`ask-${key}`).style.backgroundColor = "green";
|
||||
grade++;
|
||||
document.getElementById(`ans-${value}`).style.backgroundColor = "green";
|
||||
}else{
|
||||
// document.getElementById(`ask-${key}`).style.backgroundColor = "red";
|
||||
document.getElementById(`ans-${value}`).style.backgroundColor = "red";
|
||||
}
|
||||
}
|
||||
});
|
||||
setTimeout(()=>{
|
||||
if (grade == code.length) {
|
||||
alert("Поздравляю вы прошли уровень");
|
||||
console.log({theme:"<%= theme %>",lvl:"<%= lvl %>"});
|
||||
$.post("/finish/<%= theme %>/<%= lvl %>")
|
||||
.done(function( res ) {
|
||||
document.getElementsByClassName("check_btn")[0].setAttribute("onclick","")
|
||||
if("<%=lvl%>" != 5){
|
||||
let next_btn = document.createElement("button")
|
||||
next_btn.setAttribute("onclick",`goto('/<%= theme %>/<%= parseInt(lvl)+1 %>')`);
|
||||
next_btn.innerText = "следующий уровень";
|
||||
document.getElementsByClassName("header_btn3")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn3")[0].appendChild(next_btn);
|
||||
|
||||
let restart_btn = document.createElement("button")
|
||||
restart_btn.setAttribute("onclick","goto('')");
|
||||
restart_btn.innerText = "перезапустить";
|
||||
document.getElementsByClassName("header_btn2")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn2")[0].appendChild(restart_btn);
|
||||
}
|
||||
else{
|
||||
alert("Поздравляю вы прошли всю тему <%=theme_name%>");
|
||||
}
|
||||
})
|
||||
}
|
||||
else{
|
||||
alert("Вы не правильно выполнили задание");
|
||||
let restart_btn = document.createElement("button")
|
||||
restart_btn.setAttribute("onclick","goto('')");
|
||||
restart_btn.innerText = "перезапустить";
|
||||
document.getElementsByClassName("header_btn2")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn2")[0].appendChild(restart_btn);
|
||||
}
|
||||
},700)
|
||||
}
|
||||
else{
|
||||
alert("Сначала расставьте все строки")
|
||||
}
|
||||
}
|
||||
|
||||
interact('.dropzone').dropzone({
|
||||
overlap: 0.75,
|
||||
|
||||
ondropactivate: function (event) {
|
||||
// add active dropzone feedback
|
||||
event.target.classList.add('drop-active')
|
||||
},
|
||||
ondragenter: function (event) {
|
||||
var drag = event.relatedTarget
|
||||
var zone = event.target
|
||||
|
||||
// feedback the possibility of a drop
|
||||
zone.classList.add('drop-target')
|
||||
},
|
||||
ondragleave: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
// remove the drop feedback style
|
||||
// event.relatedTarget.classList.remove('can-drop')
|
||||
event.target.classList.remove('drop-target')
|
||||
// if(answer[zone.id.split("-").at(-1)] == drag.id.split("-").at(-1)){
|
||||
// answer[zone.id.split("-").at(-1)] = null
|
||||
// }
|
||||
|
||||
},
|
||||
ondrop: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
if (zone.children.length == 0) {
|
||||
zone.appendChild(drag)
|
||||
answer[zone.id.split("-").at(-1)] = drag.id.split("-").at(-1);
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
else{
|
||||
let child = zone.childNodes[0];
|
||||
let parent = drag.parentNode;
|
||||
if(zone.id.split("-").at(-1) != ""){
|
||||
answer[zone.id.split("-").at(-1)] = drag.id.split("-").at(-1);
|
||||
}
|
||||
if(parent.id.split("-").at(-1) != ""){
|
||||
answer[parent.id.split("-").at(-1)] = child.id.split("-").at(-1);
|
||||
}
|
||||
parent.appendChild(child)
|
||||
zone.appendChild(drag)
|
||||
setpos(0,0,child);
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
console.log(answer);
|
||||
|
||||
},
|
||||
ondropdeactivate: function (event) {
|
||||
event.target.classList.remove('drop-active')
|
||||
event.target.classList.remove('drop-target')
|
||||
}
|
||||
})
|
||||
|
||||
function dragMoveListener (event) {
|
||||
var target = event.target
|
||||
var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
|
||||
var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
|
||||
setpos(x,y,target);
|
||||
}
|
||||
|
||||
function setpos(x,y,obj) {
|
||||
obj.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
|
||||
obj.setAttribute('data-x', x)
|
||||
obj.setAttribute('data-y', y)
|
||||
}
|
||||
|
||||
// this function is used later in the resizing and gesture demos
|
||||
window.dragMoveListener = dragMoveListener
|
||||
|
||||
interact('.drag')
|
||||
.draggable({
|
||||
inertia: true,
|
||||
modifiers: [
|
||||
interact.modifiers.restrictRect({
|
||||
// restriction: 'parent',
|
||||
endOnly: true
|
||||
})
|
||||
],
|
||||
autoScroll: false,
|
||||
// dragMoveListener from the dragging demo above
|
||||
listeners: { move: dragMoveListener }
|
||||
})
|
||||
</script>
|
||||
|
||||
<%- include('../static/end.ejs') %>
|
||||
312
views/old/looping/lvl-3.ejs
Executable file
312
views/old/looping/lvl-3.ejs
Executable file
@ -0,0 +1,312 @@
|
||||
<%- include('../static/start.ejs') %>
|
||||
<style>
|
||||
.dropzone {
|
||||
background-color: #bfe4ff;
|
||||
border: dashed 4px transparent;
|
||||
border-radius: 4px;
|
||||
/* margin: 10px auto 10px; */
|
||||
/* padding: 10px; */
|
||||
padding: 5px;
|
||||
width: 50vw;
|
||||
min-height: 50px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.drop-active {
|
||||
border-color: #aaa;
|
||||
}
|
||||
|
||||
.drop-target {
|
||||
background-color: #29e;
|
||||
border-color: #fff;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.drag-drop {
|
||||
/* display: inline-block; */
|
||||
min-width: 40px;
|
||||
/* height: 15px; */
|
||||
padding: 5px;
|
||||
|
||||
/* padding: 2em 0.5em; */
|
||||
/* margin: 1rem 0 0 1rem; */
|
||||
|
||||
color: #fff;
|
||||
background-color: #29e;
|
||||
border: solid 2px #fff;
|
||||
|
||||
touch-action: none;
|
||||
transform: translate(0px, 0px);
|
||||
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.drag-drop.can-drop {
|
||||
color: #000;
|
||||
background-color: #4e4;
|
||||
}
|
||||
.code_vars li{
|
||||
/* display: inline-table; */
|
||||
width: max-content;
|
||||
max-width: 280px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<%
|
||||
task = 'Написать программу, которая выводит на экран таблицу стоимости яблок, в диапазоне от 100 г до 1 кг с шагом 100.';
|
||||
code ="let cost = 54; /%"+
|
||||
"let cost_table = []; /%"+
|
||||
"for(let i = 100; i <= 1000; i+=100) _% { /%"+
|
||||
"cost_table.push(`${i} г. = ${(cost / 1000) * i} руб.`); _% } /%"+
|
||||
"return cost_table;"
|
||||
%>
|
||||
|
||||
<%- include('../static/header.ejs') %>
|
||||
<section class="main">
|
||||
<div class="main-top" style="display: flex;">
|
||||
<div class="code_space" style="width: 100vw;"></div>
|
||||
<ul class="code_vars" style="border: 1px #29e solid;max-width: 300px; display: block;width: -webkit-fill-available;"></ul>
|
||||
</div>
|
||||
<div class="main-bottom" style="display: block;margin-top: 20px;">
|
||||
<div class="task" style="margin-bottom: 20px;"><b>Задача: </b> <%= task %></div>
|
||||
<div style="display: flex; justify-content: space-around;">
|
||||
<button class="check_btn" onclick="check_task()">проверить</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
// function get_lvl(callback){
|
||||
// fetch("/lvls/<%=theme%>/<%=lvl%>.txt")
|
||||
// .then((response) => {
|
||||
// return response.text();
|
||||
// })
|
||||
// .then((data) => {
|
||||
// callback(data);
|
||||
// })
|
||||
// }
|
||||
|
||||
function check_next() {
|
||||
$.post("/check/<%= theme %>/<%= lvl %>")
|
||||
.done(function( res ) {
|
||||
console.log(res["body"]);
|
||||
if(res["body"] == true){
|
||||
if("<%=lvl%>" != 5){
|
||||
let next_btn = document.createElement("button")
|
||||
next_btn.setAttribute("onclick",`goto('/<%= theme %>/<%= parseInt(lvl)+1 %>')`);
|
||||
next_btn.innerText = "следующий уровень";
|
||||
document.getElementsByClassName("header_btn3")[0].appendChild(next_btn);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
check_next()
|
||||
let answer = {};
|
||||
let code = [];
|
||||
show_task();
|
||||
|
||||
function show_task() {
|
||||
code = "<%-code%>".split("/%");
|
||||
Object.entries(code).forEach(([key,value]) => {
|
||||
code[key] = value.replace("_%","\n");
|
||||
});
|
||||
|
||||
let arr = [];
|
||||
Object.entries(code).forEach(([key,value]) => {
|
||||
// console.log(key,value);
|
||||
let new_obj = document.createElement("li");
|
||||
new_obj.id = `ans-${key}`;
|
||||
new_obj.classList.add("drag-drop");
|
||||
new_obj.classList.add("drag");
|
||||
new_obj.innerText = value;
|
||||
|
||||
let ask_obj = document.createElement("div");
|
||||
ask_obj.id = `ask-${key}`;
|
||||
ask_obj.classList.add(`dropzone`);
|
||||
|
||||
arr.push(new_obj);
|
||||
console.log(arr);
|
||||
// document.getElementsByClassName("code_vars")[0].appendChild(new_obj);
|
||||
document.getElementsByClassName("code_space")[0].appendChild(ask_obj);
|
||||
answer[key] = null
|
||||
});
|
||||
|
||||
Object.entries(shuffle_array(arr)).forEach(([key,value]) => {
|
||||
document.getElementsByClassName("code_vars")[0].appendChild(value);
|
||||
});
|
||||
}
|
||||
|
||||
function shuffle_array(array) {
|
||||
var currentIndex = array.length, temporaryValue, randomIndex;
|
||||
|
||||
while (0 !== currentIndex) {
|
||||
|
||||
randomIndex = Math.floor(Math.random() * currentIndex);
|
||||
currentIndex -= 1;
|
||||
|
||||
temporaryValue = array[currentIndex];
|
||||
array[currentIndex] = array[randomIndex];
|
||||
array[randomIndex] = temporaryValue;
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
interact('.main').dropzone({
|
||||
overlap: 0.75,
|
||||
|
||||
ondrop: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
if(drag.parentNode.id.split("-").at(-1) != ""){
|
||||
answer[drag.parentNode.id.split("-").at(-1)] = null
|
||||
}
|
||||
document.getElementsByClassName("code_vars")[0].appendChild(drag)
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
})
|
||||
|
||||
function check_task() {
|
||||
if(!Object.values(answer).includes(null)){
|
||||
let grade = 0;
|
||||
Object.entries(answer).forEach(([key,value]) => {
|
||||
if (value != null && value != "") {
|
||||
document.getElementById(`ans-${value}`).classList.remove("drag");
|
||||
if(key == value){
|
||||
// document.getElementById(`ask-${key}`).style.backgroundColor = "green";
|
||||
grade++;
|
||||
document.getElementById(`ans-${value}`).style.backgroundColor = "green";
|
||||
}else{
|
||||
// document.getElementById(`ask-${key}`).style.backgroundColor = "red";
|
||||
document.getElementById(`ans-${value}`).style.backgroundColor = "red";
|
||||
}
|
||||
}
|
||||
});
|
||||
setTimeout(()=>{
|
||||
if (grade == code.length) {
|
||||
alert("Поздравляю вы прошли уровень");
|
||||
console.log({theme:"<%= theme %>",lvl:"<%= lvl %>"});
|
||||
$.post("/finish/<%= theme %>/<%= lvl %>")
|
||||
.done(function( res ) {
|
||||
document.getElementsByClassName("check_btn")[0].setAttribute("onclick","")
|
||||
if("<%=lvl%>" != 5){
|
||||
let next_btn = document.createElement("button")
|
||||
next_btn.setAttribute("onclick",`goto('/<%= theme %>/<%= parseInt(lvl)+1 %>')`);
|
||||
next_btn.innerText = "следующий уровень";
|
||||
document.getElementsByClassName("header_btn3")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn3")[0].appendChild(next_btn);
|
||||
|
||||
let restart_btn = document.createElement("button")
|
||||
restart_btn.setAttribute("onclick","goto('')");
|
||||
restart_btn.innerText = "перезапустить";
|
||||
document.getElementsByClassName("header_btn2")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn2")[0].appendChild(restart_btn);
|
||||
}
|
||||
else{
|
||||
alert("Поздравляю вы прошли всю тему <%=theme_name%>");
|
||||
}
|
||||
})
|
||||
}
|
||||
else{
|
||||
alert("Вы не правильно выполнили задание");
|
||||
let restart_btn = document.createElement("button")
|
||||
restart_btn.setAttribute("onclick","goto('')");
|
||||
restart_btn.innerText = "перезапустить";
|
||||
document.getElementsByClassName("header_btn2")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn2")[0].appendChild(restart_btn);
|
||||
}
|
||||
},700)
|
||||
}
|
||||
else{
|
||||
alert("Сначала расставьте все строки")
|
||||
}
|
||||
}
|
||||
|
||||
interact('.dropzone').dropzone({
|
||||
overlap: 0.75,
|
||||
|
||||
ondropactivate: function (event) {
|
||||
// add active dropzone feedback
|
||||
event.target.classList.add('drop-active')
|
||||
},
|
||||
ondragenter: function (event) {
|
||||
var drag = event.relatedTarget
|
||||
var zone = event.target
|
||||
|
||||
// feedback the possibility of a drop
|
||||
zone.classList.add('drop-target')
|
||||
},
|
||||
ondragleave: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
// remove the drop feedback style
|
||||
// event.relatedTarget.classList.remove('can-drop')
|
||||
event.target.classList.remove('drop-target')
|
||||
// if(answer[zone.id.split("-").at(-1)] == drag.id.split("-").at(-1)){
|
||||
// answer[zone.id.split("-").at(-1)] = null
|
||||
// }
|
||||
|
||||
},
|
||||
ondrop: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
if (zone.children.length == 0) {
|
||||
zone.appendChild(drag)
|
||||
answer[zone.id.split("-").at(-1)] = drag.id.split("-").at(-1);
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
else{
|
||||
let child = zone.childNodes[0];
|
||||
let parent = drag.parentNode;
|
||||
if(zone.id.split("-").at(-1) != ""){
|
||||
answer[zone.id.split("-").at(-1)] = drag.id.split("-").at(-1);
|
||||
}
|
||||
if(parent.id.split("-").at(-1) != ""){
|
||||
answer[parent.id.split("-").at(-1)] = child.id.split("-").at(-1);
|
||||
}
|
||||
parent.appendChild(child)
|
||||
zone.appendChild(drag)
|
||||
setpos(0,0,child);
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
console.log(answer);
|
||||
|
||||
},
|
||||
ondropdeactivate: function (event) {
|
||||
event.target.classList.remove('drop-active')
|
||||
event.target.classList.remove('drop-target')
|
||||
}
|
||||
})
|
||||
|
||||
function dragMoveListener (event) {
|
||||
var target = event.target
|
||||
var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
|
||||
var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
|
||||
setpos(x,y,target);
|
||||
}
|
||||
|
||||
function setpos(x,y,obj) {
|
||||
obj.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
|
||||
obj.setAttribute('data-x', x)
|
||||
obj.setAttribute('data-y', y)
|
||||
}
|
||||
|
||||
// this function is used later in the resizing and gesture demos
|
||||
window.dragMoveListener = dragMoveListener
|
||||
|
||||
interact('.drag')
|
||||
.draggable({
|
||||
inertia: true,
|
||||
modifiers: [
|
||||
interact.modifiers.restrictRect({
|
||||
// restriction: 'parent',
|
||||
endOnly: true
|
||||
})
|
||||
],
|
||||
autoScroll: false,
|
||||
// dragMoveListener from the dragging demo above
|
||||
listeners: { move: dragMoveListener }
|
||||
})
|
||||
</script>
|
||||
|
||||
<%- include('../static/end.ejs') %>
|
||||
314
views/old/looping/lvl-4.ejs
Executable file
314
views/old/looping/lvl-4.ejs
Executable file
@ -0,0 +1,314 @@
|
||||
<%- include('../static/start.ejs') %>
|
||||
<style>
|
||||
.dropzone {
|
||||
background-color: #bfe4ff;
|
||||
border: dashed 4px transparent;
|
||||
border-radius: 4px;
|
||||
/* margin: 10px auto 10px; */
|
||||
/* padding: 10px; */
|
||||
padding: 5px;
|
||||
width: 50vw;
|
||||
min-height: 50px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.drop-active {
|
||||
border-color: #aaa;
|
||||
}
|
||||
|
||||
.drop-target {
|
||||
background-color: #29e;
|
||||
border-color: #fff;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.drag-drop {
|
||||
/* display: inline-block; */
|
||||
min-width: 40px;
|
||||
/* height: 15px; */
|
||||
padding: 5px;
|
||||
|
||||
/* padding: 2em 0.5em; */
|
||||
/* margin: 1rem 0 0 1rem; */
|
||||
|
||||
color: #fff;
|
||||
background-color: #29e;
|
||||
border: solid 2px #fff;
|
||||
|
||||
touch-action: none;
|
||||
transform: translate(0px, 0px);
|
||||
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.drag-drop.can-drop {
|
||||
color: #000;
|
||||
background-color: #4e4;
|
||||
}
|
||||
.code_vars li{
|
||||
/* display: inline-table; */
|
||||
width: max-content;
|
||||
max-width: 280px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<%
|
||||
task = 'Найти: все двузначные числа, сумма квадратов цифр которых делится на 13';
|
||||
code ="let nums = []; /%"+
|
||||
"for (let i = 10; i <= 99; i++) _% {/%"+
|
||||
"let a = parseInt(i / 10); /%"+
|
||||
"let b = i % 10; /%"+
|
||||
"let c = a * a + b * b; /%"+
|
||||
"if (c % 13 == 0) nums.push(i); _% } /%"+
|
||||
"return nums;"
|
||||
%>
|
||||
|
||||
<%- include('../static/header.ejs') %>
|
||||
<section class="main">
|
||||
<div class="main-top" style="display: flex;">
|
||||
<div class="code_space" style="width: 100vw;"></div>
|
||||
<ul class="code_vars" style="border: 1px #29e solid;max-width: 300px; display: block;width: -webkit-fill-available;"></ul>
|
||||
</div>
|
||||
<div class="main-bottom" style="display: block;margin-top: 20px;">
|
||||
<div class="task" style="margin-bottom: 20px;"><b>Задача: </b> <%= task %></div>
|
||||
<div style="display: flex; justify-content: space-around;">
|
||||
<button class="check_btn" onclick="check_task()">проверить</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
// function get_lvl(callback){
|
||||
// fetch("/lvls/<%=theme%>/<%=lvl%>.txt")
|
||||
// .then((response) => {
|
||||
// return response.text();
|
||||
// })
|
||||
// .then((data) => {
|
||||
// callback(data);
|
||||
// })
|
||||
// }
|
||||
|
||||
function check_next() {
|
||||
$.post("/check/<%= theme %>/<%= lvl %>")
|
||||
.done(function( res ) {
|
||||
console.log(res["body"]);
|
||||
if(res["body"] == true){
|
||||
if("<%=lvl%>" != 5){
|
||||
let next_btn = document.createElement("button")
|
||||
next_btn.setAttribute("onclick",`goto('/<%= theme %>/<%= parseInt(lvl)+1 %>')`);
|
||||
next_btn.innerText = "следующий уровень";
|
||||
document.getElementsByClassName("header_btn3")[0].appendChild(next_btn);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
check_next()
|
||||
let answer = {};
|
||||
let code = [];
|
||||
show_task();
|
||||
|
||||
function show_task() {
|
||||
code = "<%-code%>".split("/%");
|
||||
Object.entries(code).forEach(([key,value]) => {
|
||||
code[key] = value.replace("_%","\n");
|
||||
});
|
||||
|
||||
let arr = [];
|
||||
Object.entries(code).forEach(([key,value]) => {
|
||||
// console.log(key,value);
|
||||
let new_obj = document.createElement("li");
|
||||
new_obj.id = `ans-${key}`;
|
||||
new_obj.classList.add("drag-drop");
|
||||
new_obj.classList.add("drag");
|
||||
new_obj.innerText = value;
|
||||
|
||||
let ask_obj = document.createElement("div");
|
||||
ask_obj.id = `ask-${key}`;
|
||||
ask_obj.classList.add(`dropzone`);
|
||||
|
||||
arr.push(new_obj);
|
||||
console.log(arr);
|
||||
// document.getElementsByClassName("code_vars")[0].appendChild(new_obj);
|
||||
document.getElementsByClassName("code_space")[0].appendChild(ask_obj);
|
||||
answer[key] = null
|
||||
});
|
||||
|
||||
Object.entries(shuffle_array(arr)).forEach(([key,value]) => {
|
||||
document.getElementsByClassName("code_vars")[0].appendChild(value);
|
||||
});
|
||||
}
|
||||
|
||||
function shuffle_array(array) {
|
||||
var currentIndex = array.length, temporaryValue, randomIndex;
|
||||
|
||||
while (0 !== currentIndex) {
|
||||
|
||||
randomIndex = Math.floor(Math.random() * currentIndex);
|
||||
currentIndex -= 1;
|
||||
|
||||
temporaryValue = array[currentIndex];
|
||||
array[currentIndex] = array[randomIndex];
|
||||
array[randomIndex] = temporaryValue;
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
interact('.main').dropzone({
|
||||
overlap: 0.75,
|
||||
|
||||
ondrop: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
if(drag.parentNode.id.split("-").at(-1) != ""){
|
||||
answer[drag.parentNode.id.split("-").at(-1)] = null
|
||||
}
|
||||
document.getElementsByClassName("code_vars")[0].appendChild(drag)
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
})
|
||||
|
||||
function check_task() {
|
||||
if(!Object.values(answer).includes(null)){
|
||||
let grade = 0;
|
||||
Object.entries(answer).forEach(([key,value]) => {
|
||||
if (value != null && value != "") {
|
||||
document.getElementById(`ans-${value}`).classList.remove("drag");
|
||||
if(key == value){
|
||||
// document.getElementById(`ask-${key}`).style.backgroundColor = "green";
|
||||
grade++;
|
||||
document.getElementById(`ans-${value}`).style.backgroundColor = "green";
|
||||
}else{
|
||||
// document.getElementById(`ask-${key}`).style.backgroundColor = "red";
|
||||
document.getElementById(`ans-${value}`).style.backgroundColor = "red";
|
||||
}
|
||||
}
|
||||
});
|
||||
setTimeout(()=>{
|
||||
if (grade == code.length) {
|
||||
alert("Поздравляю вы прошли уровень");
|
||||
console.log({theme:"<%= theme %>",lvl:"<%= lvl %>"});
|
||||
$.post("/finish/<%= theme %>/<%= lvl %>")
|
||||
.done(function( res ) {
|
||||
document.getElementsByClassName("check_btn")[0].setAttribute("onclick","")
|
||||
if("<%=lvl%>" != 5){
|
||||
let next_btn = document.createElement("button")
|
||||
next_btn.setAttribute("onclick",`goto('/<%= theme %>/<%= parseInt(lvl)+1 %>')`);
|
||||
next_btn.innerText = "следующий уровень";
|
||||
document.getElementsByClassName("header_btn3")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn3")[0].appendChild(next_btn);
|
||||
|
||||
let restart_btn = document.createElement("button")
|
||||
restart_btn.setAttribute("onclick","goto('')");
|
||||
restart_btn.innerText = "перезапустить";
|
||||
document.getElementsByClassName("header_btn2")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn2")[0].appendChild(restart_btn);
|
||||
}
|
||||
else{
|
||||
alert("Поздравляю вы прошли всю тему <%=theme_name%>");
|
||||
}
|
||||
})
|
||||
}
|
||||
else{
|
||||
alert("Вы не правильно выполнили задание");
|
||||
let restart_btn = document.createElement("button")
|
||||
restart_btn.setAttribute("onclick","goto('')");
|
||||
restart_btn.innerText = "перезапустить";
|
||||
document.getElementsByClassName("header_btn2")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn2")[0].appendChild(restart_btn);
|
||||
}
|
||||
},700)
|
||||
}
|
||||
else{
|
||||
alert("Сначала расставьте все строки")
|
||||
}
|
||||
}
|
||||
|
||||
interact('.dropzone').dropzone({
|
||||
overlap: 0.75,
|
||||
|
||||
ondropactivate: function (event) {
|
||||
// add active dropzone feedback
|
||||
event.target.classList.add('drop-active')
|
||||
},
|
||||
ondragenter: function (event) {
|
||||
var drag = event.relatedTarget
|
||||
var zone = event.target
|
||||
|
||||
// feedback the possibility of a drop
|
||||
zone.classList.add('drop-target')
|
||||
},
|
||||
ondragleave: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
// remove the drop feedback style
|
||||
// event.relatedTarget.classList.remove('can-drop')
|
||||
event.target.classList.remove('drop-target')
|
||||
// if(answer[zone.id.split("-").at(-1)] == drag.id.split("-").at(-1)){
|
||||
// answer[zone.id.split("-").at(-1)] = null
|
||||
// }
|
||||
|
||||
},
|
||||
ondrop: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
if (zone.children.length == 0) {
|
||||
zone.appendChild(drag)
|
||||
answer[zone.id.split("-").at(-1)] = drag.id.split("-").at(-1);
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
else{
|
||||
let child = zone.childNodes[0];
|
||||
let parent = drag.parentNode;
|
||||
if(zone.id.split("-").at(-1) != ""){
|
||||
answer[zone.id.split("-").at(-1)] = drag.id.split("-").at(-1);
|
||||
}
|
||||
if(parent.id.split("-").at(-1) != ""){
|
||||
answer[parent.id.split("-").at(-1)] = child.id.split("-").at(-1);
|
||||
}
|
||||
parent.appendChild(child)
|
||||
zone.appendChild(drag)
|
||||
setpos(0,0,child);
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
console.log(answer);
|
||||
|
||||
},
|
||||
ondropdeactivate: function (event) {
|
||||
event.target.classList.remove('drop-active')
|
||||
event.target.classList.remove('drop-target')
|
||||
}
|
||||
})
|
||||
|
||||
function dragMoveListener (event) {
|
||||
var target = event.target
|
||||
var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
|
||||
var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
|
||||
setpos(x,y,target);
|
||||
}
|
||||
|
||||
function setpos(x,y,obj) {
|
||||
obj.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
|
||||
obj.setAttribute('data-x', x)
|
||||
obj.setAttribute('data-y', y)
|
||||
}
|
||||
|
||||
// this function is used later in the resizing and gesture demos
|
||||
window.dragMoveListener = dragMoveListener
|
||||
|
||||
interact('.drag')
|
||||
.draggable({
|
||||
inertia: true,
|
||||
modifiers: [
|
||||
interact.modifiers.restrictRect({
|
||||
// restriction: 'parent',
|
||||
endOnly: true
|
||||
})
|
||||
],
|
||||
autoScroll: false,
|
||||
// dragMoveListener from the dragging demo above
|
||||
listeners: { move: dragMoveListener }
|
||||
})
|
||||
</script>
|
||||
|
||||
<%- include('../static/end.ejs') %>
|
||||
314
views/old/looping/lvl-5.ejs
Executable file
314
views/old/looping/lvl-5.ejs
Executable file
@ -0,0 +1,314 @@
|
||||
<%- include('../static/start.ejs') %>
|
||||
<style>
|
||||
.dropzone {
|
||||
background-color: #bfe4ff;
|
||||
border: dashed 4px transparent;
|
||||
border-radius: 4px;
|
||||
/* margin: 10px auto 10px; */
|
||||
/* padding: 10px; */
|
||||
padding: 5px;
|
||||
width: 50vw;
|
||||
min-height: 50px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.drop-active {
|
||||
border-color: #aaa;
|
||||
}
|
||||
|
||||
.drop-target {
|
||||
background-color: #29e;
|
||||
border-color: #fff;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.drag-drop {
|
||||
/* display: inline-block; */
|
||||
min-width: 40px;
|
||||
/* height: 15px; */
|
||||
padding: 5px;
|
||||
|
||||
/* padding: 2em 0.5em; */
|
||||
/* margin: 1rem 0 0 1rem; */
|
||||
|
||||
color: #fff;
|
||||
background-color: #29e;
|
||||
border: solid 2px #fff;
|
||||
|
||||
touch-action: none;
|
||||
transform: translate(0px, 0px);
|
||||
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.drag-drop.can-drop {
|
||||
color: #000;
|
||||
background-color: #4e4;
|
||||
}
|
||||
.code_vars li{
|
||||
/* display: inline-table; */
|
||||
width: max-content;
|
||||
max-width: 280px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<%
|
||||
task = 'Найти: все двузначные числа, обладающие следующим свойством: если к сумме цифр числа прибавить квадрат этой суммы, то получится снова искомое число.';
|
||||
code ="let nums = []; /%"+
|
||||
"for (let i = 10; i <= 99; i++) _% { /%"+
|
||||
"let a = parseInt(i / 10); /%"+
|
||||
"let b = i % 10; /%"+
|
||||
"let sum = a+b; /%"+
|
||||
"let sqr = sum * sum; /%"+
|
||||
"if((sum+sqr) == i) nums.push(i); _% }"
|
||||
%>
|
||||
|
||||
<%- include('../static/header.ejs') %>
|
||||
<section class="main">
|
||||
<div class="main-top" style="display: flex;">
|
||||
<div class="code_space" style="width: 100vw;"></div>
|
||||
<ul class="code_vars" style="border: 1px #29e solid;max-width: 300px; display: block;width: -webkit-fill-available;"></ul>
|
||||
</div>
|
||||
<div class="main-bottom" style="display: block;margin-top: 20px;">
|
||||
<div class="task" style="margin-bottom: 20px;"><b>Задача: </b> <%= task %></div>
|
||||
<div style="display: flex; justify-content: space-around;">
|
||||
<button class="check_btn" onclick="check_task()">проверить</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
// function get_lvl(callback){
|
||||
// fetch("/lvls/<%=theme%>/<%=lvl%>.txt")
|
||||
// .then((response) => {
|
||||
// return response.text();
|
||||
// })
|
||||
// .then((data) => {
|
||||
// callback(data);
|
||||
// })
|
||||
// }
|
||||
|
||||
function check_next() {
|
||||
$.post("/check/<%= theme %>/<%= lvl %>")
|
||||
.done(function( res ) {
|
||||
console.log(res["body"]);
|
||||
if(res["body"] == true){
|
||||
if("<%=lvl%>" != 5){
|
||||
let next_btn = document.createElement("button")
|
||||
next_btn.setAttribute("onclick",`goto('/<%= theme %>/<%= parseInt(lvl)+1 %>')`);
|
||||
next_btn.innerText = "следующий уровень";
|
||||
document.getElementsByClassName("header_btn3")[0].appendChild(next_btn);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
check_next()
|
||||
let answer = {};
|
||||
let code = [];
|
||||
show_task();
|
||||
|
||||
function show_task() {
|
||||
code = "<%-code%>".split("/%");
|
||||
Object.entries(code).forEach(([key,value]) => {
|
||||
code[key] = value.replace("_%","\n");
|
||||
});
|
||||
|
||||
let arr = [];
|
||||
Object.entries(code).forEach(([key,value]) => {
|
||||
// console.log(key,value);
|
||||
let new_obj = document.createElement("li");
|
||||
new_obj.id = `ans-${key}`;
|
||||
new_obj.classList.add("drag-drop");
|
||||
new_obj.classList.add("drag");
|
||||
new_obj.innerText = value;
|
||||
|
||||
let ask_obj = document.createElement("div");
|
||||
ask_obj.id = `ask-${key}`;
|
||||
ask_obj.classList.add(`dropzone`);
|
||||
|
||||
arr.push(new_obj);
|
||||
console.log(arr);
|
||||
// document.getElementsByClassName("code_vars")[0].appendChild(new_obj);
|
||||
document.getElementsByClassName("code_space")[0].appendChild(ask_obj);
|
||||
answer[key] = null
|
||||
});
|
||||
|
||||
Object.entries(shuffle_array(arr)).forEach(([key,value]) => {
|
||||
document.getElementsByClassName("code_vars")[0].appendChild(value);
|
||||
});
|
||||
}
|
||||
|
||||
function shuffle_array(array) {
|
||||
var currentIndex = array.length, temporaryValue, randomIndex;
|
||||
|
||||
while (0 !== currentIndex) {
|
||||
|
||||
randomIndex = Math.floor(Math.random() * currentIndex);
|
||||
currentIndex -= 1;
|
||||
|
||||
temporaryValue = array[currentIndex];
|
||||
array[currentIndex] = array[randomIndex];
|
||||
array[randomIndex] = temporaryValue;
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
interact('.main').dropzone({
|
||||
overlap: 0.75,
|
||||
|
||||
ondrop: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
if(drag.parentNode.id.split("-").at(-1) != ""){
|
||||
answer[drag.parentNode.id.split("-").at(-1)] = null
|
||||
}
|
||||
document.getElementsByClassName("code_vars")[0].appendChild(drag)
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
})
|
||||
|
||||
function check_task() {
|
||||
if(!Object.values(answer).includes(null)){
|
||||
let grade = 0;
|
||||
Object.entries(answer).forEach(([key,value]) => {
|
||||
if (value != null && value != "") {
|
||||
document.getElementById(`ans-${value}`).classList.remove("drag");
|
||||
if(key == value){
|
||||
// document.getElementById(`ask-${key}`).style.backgroundColor = "green";
|
||||
grade++;
|
||||
document.getElementById(`ans-${value}`).style.backgroundColor = "green";
|
||||
}else{
|
||||
// document.getElementById(`ask-${key}`).style.backgroundColor = "red";
|
||||
document.getElementById(`ans-${value}`).style.backgroundColor = "red";
|
||||
}
|
||||
}
|
||||
});
|
||||
setTimeout(()=>{
|
||||
if (grade == code.length) {
|
||||
alert("Поздравляю вы прошли уровень");
|
||||
console.log({theme:"<%= theme %>",lvl:"<%= lvl %>"});
|
||||
$.post("/finish/<%= theme %>/<%= lvl %>")
|
||||
.done(function( res ) {
|
||||
document.getElementsByClassName("check_btn")[0].setAttribute("onclick","")
|
||||
if("<%=lvl%>" != 5){
|
||||
let next_btn = document.createElement("button")
|
||||
next_btn.setAttribute("onclick",`goto('/<%= theme %>/<%= parseInt(lvl)+1 %>')`);
|
||||
next_btn.innerText = "следующий уровень";
|
||||
document.getElementsByClassName("header_btn3")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn3")[0].appendChild(next_btn);
|
||||
|
||||
let restart_btn = document.createElement("button")
|
||||
restart_btn.setAttribute("onclick","goto('')");
|
||||
restart_btn.innerText = "перезапустить";
|
||||
document.getElementsByClassName("header_btn2")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn2")[0].appendChild(restart_btn);
|
||||
}
|
||||
else{
|
||||
alert("Поздравляю вы прошли всю тему <%=theme_name%>");
|
||||
}
|
||||
})
|
||||
}
|
||||
else{
|
||||
alert("Вы не правильно выполнили задание");
|
||||
let restart_btn = document.createElement("button")
|
||||
restart_btn.setAttribute("onclick","goto('')");
|
||||
restart_btn.innerText = "перезапустить";
|
||||
document.getElementsByClassName("header_btn2")[0].innerHTML = "";
|
||||
document.getElementsByClassName("header_btn2")[0].appendChild(restart_btn);
|
||||
}
|
||||
},700)
|
||||
}
|
||||
else{
|
||||
alert("Сначала расставьте все строки")
|
||||
}
|
||||
}
|
||||
|
||||
interact('.dropzone').dropzone({
|
||||
overlap: 0.75,
|
||||
|
||||
ondropactivate: function (event) {
|
||||
// add active dropzone feedback
|
||||
event.target.classList.add('drop-active')
|
||||
},
|
||||
ondragenter: function (event) {
|
||||
var drag = event.relatedTarget
|
||||
var zone = event.target
|
||||
|
||||
// feedback the possibility of a drop
|
||||
zone.classList.add('drop-target')
|
||||
},
|
||||
ondragleave: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
// remove the drop feedback style
|
||||
// event.relatedTarget.classList.remove('can-drop')
|
||||
event.target.classList.remove('drop-target')
|
||||
// if(answer[zone.id.split("-").at(-1)] == drag.id.split("-").at(-1)){
|
||||
// answer[zone.id.split("-").at(-1)] = null
|
||||
// }
|
||||
|
||||
},
|
||||
ondrop: function (event) {
|
||||
var drag = event.relatedTarget;
|
||||
var zone = event.target;
|
||||
if (zone.children.length == 0) {
|
||||
zone.appendChild(drag)
|
||||
answer[zone.id.split("-").at(-1)] = drag.id.split("-").at(-1);
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
else{
|
||||
let child = zone.childNodes[0];
|
||||
let parent = drag.parentNode;
|
||||
if(zone.id.split("-").at(-1) != ""){
|
||||
answer[zone.id.split("-").at(-1)] = drag.id.split("-").at(-1);
|
||||
}
|
||||
if(parent.id.split("-").at(-1) != ""){
|
||||
answer[parent.id.split("-").at(-1)] = child.id.split("-").at(-1);
|
||||
}
|
||||
parent.appendChild(child)
|
||||
zone.appendChild(drag)
|
||||
setpos(0,0,child);
|
||||
setpos(0,0,drag);
|
||||
}
|
||||
console.log(answer);
|
||||
|
||||
},
|
||||
ondropdeactivate: function (event) {
|
||||
event.target.classList.remove('drop-active')
|
||||
event.target.classList.remove('drop-target')
|
||||
}
|
||||
})
|
||||
|
||||
function dragMoveListener (event) {
|
||||
var target = event.target
|
||||
var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
|
||||
var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
|
||||
setpos(x,y,target);
|
||||
}
|
||||
|
||||
function setpos(x,y,obj) {
|
||||
obj.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
|
||||
obj.setAttribute('data-x', x)
|
||||
obj.setAttribute('data-y', y)
|
||||
}
|
||||
|
||||
// this function is used later in the resizing and gesture demos
|
||||
window.dragMoveListener = dragMoveListener
|
||||
|
||||
interact('.drag')
|
||||
.draggable({
|
||||
inertia: true,
|
||||
modifiers: [
|
||||
interact.modifiers.restrictRect({
|
||||
// restriction: 'parent',
|
||||
endOnly: true
|
||||
})
|
||||
],
|
||||
autoScroll: false,
|
||||
// dragMoveListener from the dragging demo above
|
||||
listeners: { move: dragMoveListener }
|
||||
})
|
||||
</script>
|
||||
|
||||
<%- include('../static/end.ejs') %>
|
||||
Reference in New Issue
Block a user