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

.gitignore

@@ -0,0 +1,3 @@
+/.vscode
+/dist
+/node_modules

index.js

@@ -0,0 +1,40 @@
+const {app, BrowserWindow} = require('electron')
+const server = require("./server");
+
+let mainWindow
+
+function createWindow () {
+  mainWindow = new BrowserWindow({
+    width: 1280,
+    height: 720,
+    webPreferences: {
+      nodeIntegration: true
+    },
+    // autoHideMenuBar: true
+    // frame: false
+  })
+  mainWindow.setMenuBarVisibility(false);
+  mainWindow.loadURL('http://localhost:3621/')
+
+  mainWindow.on('closed', function () {
+    mainWindow = null
+  })
+}
+
+app.on('ready', createWindow)
+
+app.on('resize', function(e,x,y){
+  mainWindow.setSize(x, y);
+});
+
+app.on('window-all-closed', function () {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', function () {
+  if (mainWindow === null) {
+    createWindow()
+  }
+})

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "progers",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "window": {
+    "toolbar": false
+  },
+  "scripts": {
+    "start": "electron index.js"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "ejs": "^3.1.9",
+    "express": "^4.18.2"
+  },
+  "build": {
+    "appId": "com.n0r.progers",
+    "files": [
+      "views/**/*",
+      "public/**/*",
+      "index.js",
+      "server.js",
+      "node_modules/**/*",
+      "package.json"
+    ],
+    "directories": {
+      "buildResources": "resources"
+    }
+  }
+}

public/lib/functions.js

@@ -0,0 +1,3 @@
+function goto(url) {
+    window.location.replace(url);
+}

public/lib/inter.js

@@ -0,0 +1,459 @@
+window.dragMoveListener = dragMoveListener;
+let root = document.getElementById("drags");
+let objs = { height:"2",width:"4",color:"#FFFFFF"};
+let objs_store = {};
+let proj_from = "cloud";
+let cur_obj;
+let objs_back = [];
+let objs_forw = [];
+let proj_state = "loading";
+let cm_mod = 2;
+
+function create(clas,x,y,color = null,id,size,layer = 0){
+    let main_clas = clas.split(" ")[0];
+    // if (body == null || body == "") body = "[]";
+    let obj = document.createElement("img");
+    obj.id = id;
+    obj.alt = id;
+    clas= clas.split(" ");
+    clas.forEach(cl => {
+        obj.classList.add(cl);
+    });
+    get_obj(main_clas,(db_data)=>{
+        // console.log(db_data);
+        // console.log(db_data);
+        // db_data.forEach(db_data => {
+        // });
+        if (db_data == null) {
+            delete objs[main_clas];
+            reload();
+            // if(proj_from == "cloud"){
+            //     // save(()=>{
+            //     //     // goto("/proj/load/"+proj_name);
+            //     // },false);
+            // }
+            // else if (proj_from == "local"){
+            //     save_local();
+            //     load_proj_local();
+            // }
+        }
+        else if (db_data != null){
+            make(objs_store[main_clas]["img"])
+        }
+        function make(img){
+            // console.log(db_data);
+            obj.src = img;
+            obj.title = `${db_data["name"].replaceAll("$"," ").split("~g")[0]}\nцена:${db_data["cost"]}\nширина:${db_data["width"]}см высота:${db_data["height"]}см`;
+            obj.setAttribute("cost",db_data["cost"])
+            obj.setAttribute("colors",Boolean(db_data["colors"]))
+            obj.setAttribute("data-img",img)
+            obj.setAttribute("gid",db_data["gid"])
+            obj.setAttribute("pid",db_data["pid"])
+            obj.setAttribute("color",color)
+            // drag.transform = `translate(${drag.getAttribute("data-y")}px, ${drag.getAttribute("data-y")}px) scale(${db_data["width"] * cm_mod} ${db_data["height"] * cm_mod})`;
+            if(size){
+                obj.style.width = `${db_data["width"] * cm_mod}px`;
+                obj.style.height = `${db_data["height"] * cm_mod}px`;
+            }
+            if (color != null){
+                obj_color_change(color,obj)
+            }
+        }
+        calc_total();
+    })
+    obj.setAttribute("decoding","async");
+    obj.setAttribute("loading","lazy");
+    if(id != "none"){obj.setAttribute("onclick",`obj_click("${id}")`);}
+    // console.log(main_clas);
+    if(main_clas.split("~p~").at(-1) == "Бизиборды"){
+        obj.setAttribute("layer",9999);
+        obj.style.zIndex = 9999;
+    }
+    else{
+        obj.setAttribute("layer",layer);
+        obj.style.zIndex = layer;
+    }
+    root.append(obj);
+    set_pos(obj,x,y);
+}
+
+function obj_click(id){
+    if (cur_obj != id){
+        let obj = document.getElementById(id);
+
+        let cur_layer = obj.style.zIndex;
+
+        cur_obj = id;
+        if(cur_layer=="9999"){
+            document.getElementsByClassName("layer_changer")[0].style.pointerEvents = "none"; 
+            document.getElementById("layer_inp").value = "-";        
+        }
+        else{
+            document.getElementsByClassName("layer_changer")[0].style.pointerEvents = "all"; 
+            document.getElementById("layer_inp").value = cur_layer;
+        }
+
+        if (obj.getAttribute("colors") == "true"){
+            clear_palette();
+            obj_colors_load(()=>{
+                document.getElementById("obj_color_div").style.display = "flex";
+                if( document.getElementById(`color_${obj.getAttribute("color")}`) != null){
+                    document.getElementById(`color_${obj.getAttribute("color")}`).style.border = "1px blue solid"
+                }
+            });
+        }
+        else{
+            document.getElementById("obj_color_div").style.display = "none";
+        }
+        obj_selection();
+        // console.log(obj.);
+    }
+}
+function obj_selection(clear = false){
+    cur_obj = (clear == true)? null:cur_obj;
+    let drags = document.getElementsByClassName("drag");
+    Object.values(drags).forEach(element => {
+        // console.log(element.id,cur_obj);
+        if (element.id != cur_obj){
+            element.style.border = "0px";
+        }
+        else{
+            element.style.border = "2px black solid"; 
+            element.style.borderRadius = "0.2vw"; 
+        }
+    });
+}
+
+function resize_drags(){
+    document.getElementById('drags').setAttribute("data-x",document.getElementsByClassName("wall")[0].getBoundingClientRect().left.toString()+"px");
+    document.getElementById('drags').style.left = document.getElementsByClassName("wall")[0].getBoundingClientRect().left.toString()+"px";
+    document.getElementById('drags').style.width = document.getElementsByClassName("wall")[0].style.width;
+    document.getElementsByClassName("zones")[0].style.height = document.getElementsByClassName("wall")[0].style.height;
+    drag_start();
+}
+
+function wall_size_change(type,value = null){
+   if (proj_state == "loaded"){objs_back.push(JSON.parse(JSON.stringify(objs)));}
+
+    let wall = document.getElementsByClassName("wall")[0];
+    let drags = document.getElementById("drags");
+    let scroll;
+    if(type != null && type == "width") {
+        if (value == null) scroll = parseFloat(document.getElementById("wall_width").value);
+        else if (value != null) scroll = value;
+        // document.getElementById("wall_width_value").innerHTML = (Math.ceil((parseFloat(scroll)+0.1)*10)/ 10);
+        // document.getElementById("wall_width_value").innerHTML = `${scroll}м`;
+
+        // console.log(scroll);
+        wall.style.width = `${(scroll * 100) * cm_mod}px`;
+        wall.style.left = drags.getBoundingClientRect().left;
+        objs["width"] = scroll;
+    }
+    if(type != null && type == "height") {
+        if (value == null) scroll = parseFloat(document.getElementById("wall_height").value);
+        else if (value != null) scroll = value;
+        // document.getElementById("wall_height_value").innerHTML = (Math.ceil((parseFloat(scroll)+0.1)*10)/ 10);
+        // document.getElementById("wall_height_value").innerHTML = `${scroll}м`;
+
+        // console.log(scroll);
+        wall.style.height = `${(scroll * 100) * cm_mod}px`;
+        objs["height"] = scroll;
+    }            
+}
+
+function calc_total(start = false){
+    document.getElementById("cost_list").innerHTML = ""
+    if (start) {
+        document.getElementById("proj_cost_text").innerText = `Стоимость: ${objs["total"]} руб.`;
+        return;
+    }
+    let total=0;
+    Object.entries(objs).forEach(([key,value]) => {
+        // console.log(key);
+        if(key != "height"&&key!="width"&key!="total"){
+            // console.log(Object.keys(value).length);
+            // console.log(objs_store[key]);
+            if(objs_store[key] != null && objs_store[key]["cost"] > 0 && JSON.parse(document.getElementById(`group_drop-${objs_store[key]["pid"]}`).getAttribute("no-cost")) == false){
+                // console.log(key,value); 
+                total += parseInt(parseInt(objs_store[key]["cost"]) * Object.keys(value).length);
+                let obj_cost_div = document.createElement("li");
+                obj_cost_div.innerHTML =
+                `<div style="display:flex;"> ` +
+                    `<div id='obj_cost_name' style='font-size:calc(var(--main-font-size)/1);'>${key.split("~g~")[0].replaceAll("$"," ")}`+
+                    `<div id='obj_cost_count'>&nbsp${Object.keys(value).length}X</div> </div>`+
+                `</div>`+
+                `<div id='obj_cost'>${parseInt(parseInt(objs_store[key]["cost"]) * Object.keys(value).length)}</div>`;
+                document.getElementById("cost_list").append(obj_cost_div);
+            }
+        }
+        // console.log(Object.keys(objs).at(-1));
+    });
+    // return total;
+
+    objs["total"] = total;
+    document.getElementById("proj_cost_text").innerText = `стоимость: ${total} руб.`;
+}
+
+function load(objss){
+    proj_state = "loading";
+    // objs = JSON.parse($.cookie("objs"));
+    // console.log(objs);
+    objs = objss;
+    Object.entries(objs).forEach(([keys, values]) => {
+        // console.log(keys,values);
+        if (keys != "width" && keys != "height" && keys != "color" && keys != "grided"){
+            Object.entries(values).forEach(([key, value]) => {
+                if(key != "class"){
+                    // console.log(key,keys);
+                    // console.log(keys,value["x"],value["y"],value["body"]);
+                    // let count = Object.keys(objs[keys]).length;
+                    // console.log(count);
+                    create(keys+" drag",value["x"],value["y"],value["color"],key,true,value["layer"]);
+                }
+            })
+        }
+        else {
+            document.getElementById(`wall_${keys}`).value = values;
+            wall_size_change(keys,values);
+            // document.getElementById("drags").style.left = $(".dropzone")[0].getBoundingClientRect().x;
+        }
+
+        if (keys == "color"){
+            document.getElementById("wall").style.backgroundColor = values;
+        }
+        if (keys == Object.keys(objs).at(-1)){
+            proj_state = "loaded";
+            loaded();
+        }
+    });
+    resize_drags();
+}
+function reload(save = false){
+    // objs = JSON.parse($.cookie("objs"));
+    // console.log(objs);
+    document.getElementById("drags").innerHTML = "";
+    load(objs);
+    if(save){save(()=>{},false)}
+}
+
+function load_proj_cloud(){
+    proj_from = "cloud";
+    document.getElementById("drags").innerHTML = "";
+    // document.getElementById("top_panel_center").innerText = `загрузка ${proj_name} из облака`;
+    $.post( "/load_proj",{name:proj_name})
+    .done(function( res ) {
+        if(res["out"] == "good"){
+            // console.log("good");
+            // console.log(JSON.parse(`'${res["body"]}'`));
+            // console.log(JSON.parse(res["body"]));
+            // $.cookie("objs",res["body"]);
+            load(JSON.parse(res["body"]));
+            // document.getElementById("top_panel_center").innerText = `${proj_name} (облако)`;
+        }
+        else if(res["out"] == "bad proj"){
+            // console.log("bad");
+            save(()=>{
+                goto("/proj/load/"+proj_name);
+            },false);
+        }
+    })
+}
+
+function load_proj_local(){
+    // document.getElementById("top_panel_center").innerText = `loading ${proj_name} from local storage`;
+    proj_from = "local";
+    if(localStorage.getItem(proj_name) == null){
+        save_local()
+    }
+    // document.getElementById("top_panel_center").innerText = `${proj_name} (локальное хранилище)`;
+    document.getElementById("drags").innerHTML = "";
+    load(JSON.parse(localStorage.getItem(proj_name)));
+}
+
+function save_local(){
+    // console.log(objs);
+    proj_from = "local";
+    localStorage.setItem(proj_name,JSON.stringify(objs));
+}
+
+function save(callback,with_pic = true){
+    // console.log(objs);
+    proj_from = "cloud";
+    if(with_pic){
+        proj_img((src)=>{
+            make_save(src);
+        })
+    }
+    else{
+        make_save();
+    }
+    function make_save(src = "img/img_placeholder.webp"){
+        $.post( "/save_proj", {proj:JSON.stringify(objs),name:proj_name,img:src})
+        .done(function( res ) {
+        if(res["out"] == "good"){
+                // console.log(scr)
+                // console.log("good");
+                if(callback) callback(res);
+            }
+        })
+    }
+}
+
+function load_objs(callback,group){
+    // let select = document.getElementById("group_select");
+    // console.log(group);
+    $.post( "/get_objs",{gid:group})
+    .done(function( res ) {
+        if(res["out"] == "good"){
+            // console.log(res["body"]);
+            res["body"].forEach(element => {
+                objs_store[`${element["name"]}`] = {img:element["img"],height:element["height"],width:element["width"],id:element["id"],name:element["name"],cost:element["cost"],colors:element["colors"],gid:element["gid"],pid:element["pid"]}
+            });
+            callback(res["body"]);
+        }
+    });
+}
+
+function get_obj(clas,callback){
+    if(objs_store[clas] != null){
+        callback(objs_store[clas]);
+    }
+    else{
+        load_objs(()=>{
+            callback(objs_store[clas]);
+        })
+    }
+}
+
+function load_obj(name,key,callback){
+    $.post( "/get_obj",{name:name,key:key})
+    .done(function( res ) {
+        if(res["out"] == "good"){
+            // console.log(res["body"]);
+            callback(res["body"]);
+        }
+    });
+}
+
+function dragMoveListener (event) {
+    var drag = event.target
+    if(drag.id != "none"){obj_click(drag.id)}
+    var x = (parseFloat(drag.getAttribute('data-x')) || 0) + event.dx
+    var y = (parseFloat(drag.getAttribute('data-y')) || 0) + event.dy
+    set_pos(drag,x,y);
+}
+    let dragzone = document.getElementsByClassName('wall')[0];
+interact('.drag').draggable({
+    inertia: true,
+    modifiers: [
+    interact.modifiers.restrictRect({restriction: dragzone,endOnly: true,elementRect:{ left: 0.15, right: 0.85, top: 0, bottom: 1 }}),
+    interact.modifiers.snap({targets: [interact.snappers.grid({ x: cm_mod, y: cm_mod })],range: Infinity,relativePoints: [ { x: 0, y: 0 } ]}),
+    ],
+    autoScroll: true,
+    listeners: {move: dragMoveListener, end (event) {}}
+})
+
+// interact('.trash').dropzone({
+//     accept: '.drag',
+//     overlap: 0.2,
+
+//     ondragenter: function (event) {var drag = event.relatedTarget;var zone = event.target; 
+
+//         // console.log(drag.classList);
+//         if(objs[drag.classList[0]] != null&&objs[drag.classList[0]][drag.id] != null) {
+//             delete objs[drag.classList[0]][drag.id];
+//         }
+//         calc_total()
+
+//         zone.classList.add('drop-target');drag.classList.add('can-drop');
+//         drag.remove();
+//     },
+//     ondragleave: function (event) {var drag = event.relatedTarget;var zone = event.target;zone.classList.remove('drop-target');drag.classList.remove('in_zone');drag.classList.remove('can-drop');},
+//     ondrop: function (event) {var drag = event.relatedTarget;
+//         // console.log(drag.id);
+//         // console.log(objs);
+//         drag.classList.add('in_zone');drag.classList.remove('can-drop');
+//     },
+//     ondropdeactivate: function (event) {var zone = event.target;zone.classList.remove('drop-active');zone.classList.remove('drop-target');}
+// })
+
+interact('.dropzone').dropzone({
+    accept: '.drag',
+    overlap: 0.5,
+
+    ondragenter: function (event) {var drag = event.relatedTarget;var zone = event.target;
+
+        if (objs[drag.classList[0]] == null){ 
+            objs[drag.classList[0]] = {};
+        }
+        if(drag.id == "none") drag.id = get_id(drag.classList[0]);
+        if (objs[drag.classList[0]][drag.id] == null){
+            objs[drag.classList[0]][drag.id] = {};
+            drag.setAttribute("onclick",`obj_click("${drag.id}")`);
+            calc_total()
+        }
+        zone.classList.add('drop-target');drag.classList.add('can-drop');
+    },
+    ondragleave: function (event) {var drag = event.relatedTarget;var zone = event.target;zone.classList.remove('drop-target');drag.classList.remove('in_zone');drag.classList.remove('can-drop');},
+    ondrop: function (event) {var drag = event.relatedTarget
+        
+       if (proj_state == "loaded"){objs_back.push(JSON.parse(JSON.stringify(objs)));}
+        objs[drag.classList[0]][drag.id] = {y:drag.getAttribute('data-y'),x:drag.getAttribute('data-x'),body:drag.innerHTML,color:drag.getAttribute("color"),layer:drag.getAttribute('layer')};
+        drag.classList.add('in_zone');drag.classList.remove('can-drop');
+        // console.log(objs["KeyBoard~g~не$основное"]["KeyBoard~g~не$основное_1"]);
+        
+    },
+    ondropdeactivate: function (event) {var zone = event.target;zone.classList.remove('drop-active');zone.classList.remove('drop-target');}
+})
+
+interact('.createzone').dropzone({
+    accept: '.spawn',
+    overlap: 0.2,
+
+    ondragenter: function (event) {var drag = event.relatedTarget;var zone = event.target;
+        zone.classList.add('drop-target');drag.classList.add('can-drop');
+    },
+    ondragleave: function (event) {var drag = event.relatedTarget;var zone = event.target;
+
+        if(drag.classList[1] == "spawn" && drag.classList[0] == zone.classList[0]){
+            get_obj(drag.classList[0],(db_data)=>{
+                // drag.transform = `translate(${drag.getAttribute("data-y")}px, ${drag.getAttribute("data-y")}px) scale(${db_data["width"] * cm_mod} ${db_data["height"] * cm_mod})`;
+                drag.style.width = `${db_data["width"] * cm_mod}px`;
+                drag.style.height = `${db_data["height"] * cm_mod}px`;
+
+                // console.log(db_data);
+            })
+            let x = zone.getBoundingClientRect().left - document.getElementById("drags").getBoundingClientRect().left;
+            let y = zone.getBoundingClientRect().top - document.getElementById("drags").getBoundingClientRect().top;
+            create(`${zone.classList[0]} spawn drag`,x,y,null,`none`,false,0);
+           if (proj_state == "loaded"){objs_back.push(JSON.parse(JSON.stringify(objs)));}
+            drag.classList.remove('spawn');
+        }
+        zone.classList.remove('drop-target');
+    },
+    ondrop: function (event) {var drag = event.relatedTarget;
+        drag.classList.remove('in_zone');drag.classList.remove('can-drop');},
+    ondropdeactivate: function (event) {var zone = event.target;
+        zone.classList.remove('drop-active');zone.classList.remove('drop-target');}
+})
+
+function drag_start() {
+    let spawns = document.getElementsByClassName("spawn");
+    Object.entries(spawns).forEach(([key, spawn]) => {
+        spawn.parentElement.removeChild(spawn);
+    });
+    let zones = document.getElementsByClassName("createzone");
+    Object.entries(zones).forEach(([key, zone]) => {
+        let x = zone.getBoundingClientRect().left - document.getElementById("drags").getBoundingClientRect().left;
+        let y = zone.getBoundingClientRect().top - document.getElementById("drags").getBoundingClientRect().top;
+        create(`${zone.classList[0]} spawn drag`,x,y,null,`none`,false,0);
+    });
+}
+
+function get_id(clas){
+    if(objs[clas] == null){  return `${clas}_0`}
+    else{
+        let count = Object.keys(objs[clas]).length;
+        return `${clas}_${count}`;
+    }
+}

public/lib/inter_temp.js

@@ -0,0 +1,441 @@
+window.dragMoveListener = dragMoveListener;
+let root = document.getElementById("drags");
+let objs = { height:"2",width:"4",color:"#FFFFFF",total:0};
+let objs_store = {};
+let proj_from = "cloud";
+let cur_obj;
+let objs_back = [];
+let objs_forw = [];
+let proj_state = "loading";
+let cm_mod = 2;
+
+function create(clas,x,y,color = null,id,size,layer = 0){
+    let main_clas = clas.split(" ")[0];
+    // if (body == null || body == "") body = "[]";
+    let obj = document.createElement("img");
+    obj.id = id;
+    obj.alt = id;
+    clas= clas.split(" ");
+    clas.forEach(cl => {
+        obj.classList.add(cl);
+    });
+    get_obj(main_clas,(db_data)=>{
+        // console.log(db_data);
+        // console.log(db_data);
+        // db_data.forEach(db_data => {
+        // });
+        if (db_data == null) {
+            delete objs[main_clas];
+            reload();
+            // if(proj_from == "cloud"){
+            //     // save(()=>{
+            //     //     // goto("/proj/load/"+proj_name);
+            //     // },false);
+            // }
+            // else if (proj_from == "local"){
+            //     save_local();
+            //     load_proj_local();
+            // }
+        }
+        else if (db_data != null){
+            make(objs_store[main_clas]["img"])
+        }
+        function make(img){
+            // console.log(db_data);
+            obj.src = img;
+            obj.title = `${db_data["name"].replaceAll("$"," ").split("~g")[0]}\nцена:${db_data["cost"]}\nширина:${db_data["width"]}см высота:${db_data["height"]}см`;
+            obj.setAttribute("cost",db_data["cost"])
+            obj.setAttribute("colors",Boolean(db_data["colors"]))
+            obj.setAttribute("data-img",img)
+            obj.setAttribute("gid",db_data["gid"])
+            obj.setAttribute("pid",db_data["pid"])
+            obj.setAttribute("color",color)
+            // drag.transform = `translate(${drag.getAttribute("data-y")}px, ${drag.getAttribute("data-y")}px) scale(${db_data["width"] * cm_mod} ${db_data["height"] * cm_mod})`;
+            if(size){
+                obj.style.width = `${db_data["width"] * cm_mod}px`;
+                obj.style.height = `${db_data["height"] * cm_mod}px`;
+            }
+            if (color != null){
+                obj_color_change(color,obj)
+            }
+        }
+        calc_total();
+    })
+    obj.setAttribute("decoding","async");
+    obj.setAttribute("loading","lazy");
+    if(id != "none"){obj.setAttribute("onclick",`obj_click("${id}")`);}
+    // console.log(main_clas);
+    if(main_clas.split("~p~").at(-1) == "Бизиборды"){
+        obj.setAttribute("layer",9999);
+        obj.style.zIndex = 9999;
+    }
+    else{
+        obj.setAttribute("layer",layer);
+        obj.style.zIndex = layer;
+    }
+    root.append(obj);
+    set_pos(obj,x,y);
+}
+
+function obj_click(id){
+    if (cur_obj != id){
+        let obj = document.getElementById(id);
+
+        let cur_layer = obj.style.zIndex;
+
+        cur_obj = id;
+        if(cur_layer=="9999"){
+            document.getElementsByClassName("layer_changer")[0].style.pointerEvents = "none"; 
+            document.getElementById("layer_inp").value = "-";        
+        }
+        else{
+            document.getElementsByClassName("layer_changer")[0].style.pointerEvents = "all"; 
+            document.getElementById("layer_inp").value = cur_layer;
+        }
+
+        if (obj.getAttribute("colors") == "true"){
+            clear_palette();
+            obj_colors_load(()=>{
+                document.getElementById("obj_color_div").style.display = "flex";
+                if( document.getElementById(`color_${obj.getAttribute("color")}`) != null){
+                    document.getElementById(`color_${obj.getAttribute("color")}`).style.border = "1px blue solid"
+                }
+            });
+        }
+        else{
+            document.getElementById("obj_color_div").style.display = "none";
+        }
+        obj_selection();
+        // console.log(obj.);
+    }
+    function obj_selection(){
+        let drags = document.getElementsByClassName("drag");
+        Object.values(drags).forEach(element => {
+            // console.log(element.id,cur_obj);
+            if (element.id != cur_obj){
+                element.style.border = "0px";
+            }
+            else{
+                element.style.border = "2px black solid"; 
+                element.style.borderRadius = "0.2vw"; 
+            }
+        });
+    }
+}
+
+function resize_drags(){
+    document.getElementById('drags').setAttribute("data-x",document.getElementsByClassName("wall")[0].getBoundingClientRect().left.toString()+"px");
+    document.getElementById('drags').style.left = document.getElementsByClassName("wall")[0].getBoundingClientRect().left.toString()+"px";
+    document.getElementById('drags').style.width = document.getElementsByClassName("wall")[0].style.width;
+    document.getElementsByClassName("zones")[0].style.height = document.getElementsByClassName("wall")[0].style.height;
+    drag_start();
+}
+
+function wall_size_change(type,value = null){
+   if (proj_state == "loaded"){objs_back.push(JSON.parse(JSON.stringify(objs)));}
+
+    let wall = document.getElementsByClassName("wall")[0];
+    let drags = document.getElementById("drags");
+    let scroll;
+    if(type != null && type == "width") {
+        if (value == null) scroll = parseFloat(document.getElementById("wall_width").value);
+        else if (value != null) scroll = value;
+        // document.getElementById("wall_width_value").innerHTML = (Math.ceil((parseFloat(scroll)+0.1)*10)/ 10);
+        // document.getElementById("wall_width_value").innerHTML = `${scroll}м`;
+
+        // console.log(scroll);
+        wall.style.width = `${(scroll * 100) * cm_mod}px`;
+        wall.style.left = drags.getBoundingClientRect().left;
+        objs["width"] = scroll;
+    }
+    if(type != null && type == "height") {
+        if (value == null) scroll = parseFloat(document.getElementById("wall_height").value);
+        else if (value != null) scroll = value;
+        // document.getElementById("wall_height_value").innerHTML = (Math.ceil((parseFloat(scroll)+0.1)*10)/ 10);
+        // document.getElementById("wall_height_value").innerHTML = `${scroll}м`;
+
+        // console.log(scroll);
+        wall.style.height = `${(scroll * 100) * cm_mod}px`;
+        objs["height"] = scroll;
+    }            
+}
+
+function calc_total(start = false){
+    document.getElementById("cost_list").innerHTML = ""
+    if (start) {
+        document.getElementById("proj_cost_text").innerText = `Стоимость: ${objs["total"]} руб.`;
+        return;
+    }
+    let total=0;
+    Object.entries(objs).forEach(([key,value]) => {
+        // console.log(key);
+        if(key != "height"&&key!="width"&key!="total"){
+            // console.log(Object.keys(value).length);
+            // console.log(objs_store[key]);
+            if(objs_store[key] != null && objs_store[key]["cost"] > 0 && JSON.parse(document.getElementById(`group_drop-${objs_store[key]["pid"]}`).getAttribute("no-cost")) == false){
+                // console.log(key,value); 
+                total += parseInt(parseInt(objs_store[key]["cost"]) * Object.keys(value).length);
+                let obj_cost_div = document.createElement("li");
+                obj_cost_div.innerHTML =
+                `<div style="display:flex;"> ` +
+                    `<div id='obj_cost_name' style='font-size:calc(var(--main-font-size)/1);'>${key.split("~g~")[0].replaceAll("$"," ")}`+
+                    `<div id='obj_cost_count'>&nbsp${Object.keys(value).length}X</div> </div>`+
+                `</div>`+
+                `<div id='obj_cost'>${parseInt(parseInt(objs_store[key]["cost"]) * Object.keys(value).length)}</div>`;
+                document.getElementById("cost_list").append(obj_cost_div);
+            }
+        }
+        // console.log(Object.keys(objs).at(-1));
+    });
+    // return total;
+
+    objs["total"] = total;
+    document.getElementById("proj_cost_text").innerText = `стоимость: ${total} руб.`;
+}
+
+function load(objss){
+    proj_state = "loading";
+    // objs = JSON.parse($.cookie("objs"));
+    // console.log(objs);
+    objs = objss;
+    Object.entries(objs).forEach(([keys, values]) => {
+        // console.log(keys,values);
+        if (keys != "width" && keys != "height" && keys != "color" && keys != "grided"){
+            Object.entries(values).forEach(([key, value]) => {
+                if(key != "class"){
+                    // console.log(key,keys);
+                    // console.log(keys,value["x"],value["y"],value["body"]);
+                    // let count = Object.keys(objs[keys]).length;
+                    // console.log(count);
+                    create(keys+" drag",value["x"],value["y"],value["color"],key,true,value["layer"]);
+                }
+            })
+        }
+        else {
+            document.getElementById(`wall_${keys}`).value = values;
+            wall_size_change(keys,values);
+            // document.getElementById("drags").style.left = $(".dropzone")[0].getBoundingClientRect().x;
+        }
+
+        if (keys == "color"){
+            document.getElementById("wall").style.backgroundColor = values;
+        }
+        if (keys == Object.keys(objs).at(-1)){
+            proj_state = "loaded";
+            loaded();
+        }
+    });
+    resize_drags();
+}
+function reload(save = false){
+    // objs = JSON.parse($.cookie("objs"));
+    // console.log(objs);
+    document.getElementById("drags").innerHTML = "";
+    load(objs);
+    if(save){save(()=>{},false)}
+}
+
+function load_proj_cloud(){
+    proj_from = "cloud";
+    document.getElementById("drags").innerHTML = "";
+    // document.getElementById("top_panel_center").innerText = `загрузка ${proj_name} из облака`;
+    $.post( "/template/get",{name:proj_name})
+    .done(function( res ) {
+        if(res["out"] == "good"){
+            // console.log("good");
+            // console.log(JSON.parse(`'${res["body"]}'`));
+            // console.log(JSON.parse(res["body"]));
+            // $.cookie("objs",res["body"]);
+            load(JSON.parse(res["body"]));
+            // document.getElementById("top_panel_center").innerText = `${proj_name} (облако)`;
+        }
+        else if(res["out"] == "bad proj"){
+            // console.log("bad");
+            save(()=>{
+                goto("/template/load"+proj_name);
+            },false);
+        }
+    })
+}
+
+function save(callback,with_pic = true){
+    // console.log(objs);
+    proj_from = "cloud";
+    if(with_pic){
+        proj_img((src)=>{
+            make_save(src);
+        })
+    }
+    else{
+        make_save();
+    }
+    function make_save(src = "img/img_placeholder.webp"){
+        $.post( "/template/save", {proj:JSON.stringify(objs),name:proj_name,img:src})
+        .done(function( res ) {
+        if(res["out"] == "good"){
+                // console.log(scr)
+                // console.log("good");
+                if(callback) callback(res);
+            }
+        })
+    }
+}
+
+function load_objs(callback,group){
+    // let select = document.getElementById("group_select");
+    // console.log(group);
+    $.post( "/get_objs",{gid:group})
+    .done(function( res ) {
+        if(res["out"] == "good"){
+            // console.log(res["body"]);
+            res["body"].forEach(element => {
+                objs_store[`${element["name"]}`] = {img:element["img"],height:element["height"],width:element["width"],id:element["id"],name:element["name"],cost:element["cost"],colors:element["colors"],gid:element["gid"],pid:element["pid"]}
+            });
+            callback(res["body"]);
+        }
+    });
+}
+
+function get_obj(clas,callback){
+    if(objs_store[clas] != null){
+        callback(objs_store[clas]);
+    }
+    else{
+        load_objs(()=>{
+            callback(objs_store[clas]);
+        })
+    }
+}
+
+function load_obj(name,key,callback){
+    $.post( "/get_obj",{name:name,key:key})
+    .done(function( res ) {
+        if(res["out"] == "good"){
+            // console.log(res["body"]);
+            callback(res["body"]);
+        }
+    });
+}
+
+function dragMoveListener (event) {
+    var drag = event.target
+    if(drag.id != "none"){obj_click(drag.id)}
+    var x = (parseFloat(drag.getAttribute('data-x')) || 0) + event.dx
+    var y = (parseFloat(drag.getAttribute('data-y')) || 0) + event.dy
+    set_pos(drag,x,y);
+}
+    let dragzone = document.getElementsByClassName('wall')[0];
+interact('.drag').draggable({
+    inertia: true,
+    modifiers: [
+    interact.modifiers.restrictRect({restriction: dragzone,endOnly: true,elementRect:{ left: 0.15, right: 0.85, top: 0, bottom: 1 }}),
+    interact.modifiers.snap({targets: [interact.snappers.grid({ x: cm_mod, y: cm_mod })],range: Infinity,relativePoints: [ { x: 0, y: 0 } ]}),
+    ],
+    autoScroll: true,
+    listeners: {move: dragMoveListener, end (event) {}}
+})
+
+// interact('.trash').dropzone({
+//     accept: '.drag',
+//     overlap: 0.2,
+
+//     ondragenter: function (event) {var drag = event.relatedTarget;var zone = event.target; 
+
+//         // console.log(drag.classList);
+//         if(objs[drag.classList[0]] != null&&objs[drag.classList[0]][drag.id] != null) {
+//             delete objs[drag.classList[0]][drag.id];
+//         }
+//         calc_total()
+
+//         zone.classList.add('drop-target');drag.classList.add('can-drop');
+//         drag.remove();
+//     },
+//     ondragleave: function (event) {var drag = event.relatedTarget;var zone = event.target;zone.classList.remove('drop-target');drag.classList.remove('in_zone');drag.classList.remove('can-drop');},
+//     ondrop: function (event) {var drag = event.relatedTarget;
+//         // console.log(drag.id);
+//         // console.log(objs);
+//         drag.classList.add('in_zone');drag.classList.remove('can-drop');
+//     },
+//     ondropdeactivate: function (event) {var zone = event.target;zone.classList.remove('drop-active');zone.classList.remove('drop-target');}
+// })
+
+interact('.dropzone').dropzone({
+    accept: '.drag',
+    overlap: 0.5,
+
+    ondragenter: function (event) {var drag = event.relatedTarget;var zone = event.target;
+
+        if (objs[drag.classList[0]] == null){ 
+            objs[drag.classList[0]] = {};
+        }
+        if(drag.id == "none") drag.id = get_id(drag.classList[0]);
+        if (objs[drag.classList[0]][drag.id] == null){
+            objs[drag.classList[0]][drag.id] = {};
+            drag.setAttribute("onclick",`obj_click("${drag.id}")`);
+            calc_total()
+        }
+        zone.classList.add('drop-target');drag.classList.add('can-drop');
+    },
+    ondragleave: function (event) {var drag = event.relatedTarget;var zone = event.target;zone.classList.remove('drop-target');drag.classList.remove('in_zone');drag.classList.remove('can-drop');},
+    ondrop: function (event) {var drag = event.relatedTarget
+        
+       if (proj_state == "loaded"){objs_back.push(JSON.parse(JSON.stringify(objs)));}
+        objs[drag.classList[0]][drag.id] = {y:drag.getAttribute('data-y'),x:drag.getAttribute('data-x'),body:drag.innerHTML,color:drag.getAttribute("color"),layer:drag.getAttribute('layer')};
+        drag.classList.add('in_zone');drag.classList.remove('can-drop');
+        // console.log(objs["KeyBoard~g~не$основное"]["KeyBoard~g~не$основное_1"]);
+        
+    },
+    ondropdeactivate: function (event) {var zone = event.target;zone.classList.remove('drop-active');zone.classList.remove('drop-target');}
+})
+
+interact('.createzone').dropzone({
+    accept: '.spawn',
+    overlap: 0.2,
+
+    ondragenter: function (event) {var drag = event.relatedTarget;var zone = event.target;
+        zone.classList.add('drop-target');drag.classList.add('can-drop');
+    },
+    ondragleave: function (event) {var drag = event.relatedTarget;var zone = event.target;
+
+        if(drag.classList[1] == "spawn" && drag.classList[0] == zone.classList[0]){
+            get_obj(drag.classList[0],(db_data)=>{
+                // drag.transform = `translate(${drag.getAttribute("data-y")}px, ${drag.getAttribute("data-y")}px) scale(${db_data["width"] * cm_mod} ${db_data["height"] * cm_mod})`;
+                drag.style.width = `${db_data["width"] * cm_mod}px`;
+                drag.style.height = `${db_data["height"] * cm_mod}px`;
+
+                // console.log(db_data);
+            })
+            let x = zone.getBoundingClientRect().left - document.getElementById("drags").getBoundingClientRect().left;
+            let y = zone.getBoundingClientRect().top - document.getElementById("drags").getBoundingClientRect().top;
+            create(`${zone.classList[0]} spawn drag`,x,y,null,`none`,false,0);
+           if (proj_state == "loaded"){objs_back.push(JSON.parse(JSON.stringify(objs)));}
+            drag.classList.remove('spawn');
+        }
+        zone.classList.remove('drop-target');
+    },
+    ondrop: function (event) {var drag = event.relatedTarget;
+        drag.classList.remove('in_zone');drag.classList.remove('can-drop');},
+    ondropdeactivate: function (event) {var zone = event.target;
+        zone.classList.remove('drop-active');zone.classList.remove('drop-target');}
+})
+
+function drag_start() {
+    let spawns = document.getElementsByClassName("spawn");
+    Object.entries(spawns).forEach(([key, spawn]) => {
+        spawn.parentElement.removeChild(spawn);
+    });
+    let zones = document.getElementsByClassName("createzone");
+    Object.entries(zones).forEach(([key, zone]) => {
+        let x = zone.getBoundingClientRect().left - document.getElementById("drags").getBoundingClientRect().left;
+        let y = zone.getBoundingClientRect().top - document.getElementById("drags").getBoundingClientRect().top;
+        create(`${zone.classList[0]} spawn drag`,x,y,null,`none`,false,0);
+    });
+}
+
+function get_id(clas){
+    if(objs[clas] == null){  return `${clas}_0`}
+    else{
+        let count = Object.keys(objs[clas]).length;
+        return `${clas}_${count}`;
+    }
+}

public/lib/jquery.cookie.js

@@ -0,0 +1,2 @@
+/*! jquery.cookie v1.4.1 | MIT */
+!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?a(require("jquery")):a(jQuery)}(function(a){function b(a){return h.raw?a:encodeURIComponent(a)}function c(a){return h.raw?a:decodeURIComponent(a)}function d(a){return b(h.json?JSON.stringify(a):String(a))}function e(a){0===a.indexOf('"')&&(a=a.slice(1,-1).replace(/\\"/g,'"').replace(/\\\\/g,"\\"));try{return a=decodeURIComponent(a.replace(g," ")),h.json?JSON.parse(a):a}catch(b){}}function f(b,c){var d=h.raw?b:e(b);return a.isFunction(c)?c(d):d}var g=/\+/g,h=a.cookie=function(e,g,i){if(void 0!==g&&!a.isFunction(g)){if(i=a.extend({},h.defaults,i),"number"==typeof i.expires){var j=i.expires,k=i.expires=new Date;k.setTime(+k+864e5*j)}return document.cookie=[b(e),"=",d(g),i.expires?"; expires="+i.expires.toUTCString():"",i.path?"; path="+i.path:"",i.domain?"; domain="+i.domain:"",i.secure?"; secure":""].join("")}for(var l=e?void 0:{},m=document.cookie?document.cookie.split("; "):[],n=0,o=m.length;o>n;n++){var p=m[n].split("="),q=c(p.shift()),r=p.join("=");if(e&&e===q){l=f(r,g);break}e||void 0===(r=f(r))||(l[q]=r)}return l};h.defaults={},a.removeCookie=function(b,c){return void 0===a.cookie(b)?!1:(a.cookie(b,"",a.extend({},c,{expires:-1})),!a.cookie(b))}});

server.js

@@ -0,0 +1,85 @@
+const express = require('express');
+
+const app = express();
+const path = require("path");
+let views = path.join(__dirname,'/views/')
+
+app.set('view engine', 'ejs');
+app.use(express.static(path.join(__dirname,'public')));
+
+let complited = {
+    "consecution":{
+        "lvls":{
+            "1":false,
+            "2":false,
+            "3":false,
+            "4":false,
+            "5":false,
+        },
+        "name":"Cледование",
+        "complited":false,
+        "id":"1"
+    },
+    "condition":{
+        "lvls":{
+            "1":false,
+            "2":false,
+            "3":false,
+            "4":false,
+            "5":false,
+        },
+        "name":"Условия",
+        "complited":false,
+        "id":"2"
+    },
+    "looping":{
+        "lvls":{
+            "1":false,
+            "2":false,
+            "3":false,
+            "4":false,
+            "5":false,
+        },
+        "name":"Циклы",
+        "complited":false,
+        "id":"3"
+    }
+}
+
+/// user
+app.get("/" , (req,res) =>{
+    res.render(views+'main',{complited:JSON.stringify(complited)});
+})
+app.get("/consecution/:id" , (req,res) =>{
+    res.render(views+'consecution/lvl-'+req.params["id"],{theme:"consecution",lvl:req.params["id"],complited:JSON.stringify(complited),theme_name:"Cледование"});
+})
+app.get("/looping/:id" , (req,res) =>{
+    res.render(views+'looping/lvl-'+req.params["id"],{theme:"looping",lvl:req.params["id"],complited:JSON.stringify(complited),theme_name:"Циклы"});
+})
+app.get("/condition/:id" , (req,res) =>{
+    res.render(views+'condition/lvl-'+req.params["id"],{theme:"condition",lvl:req.params["id"],complited:JSON.stringify(complited),theme_name:"Условия"});
+})
+// app.get("/lib/:file" , (req,res) =>{
+//     res.send()
+// })
+
+app.post('/finish/:theme/:lvl', (req, res) => {
+    let inp = req.params;
+    console.log(inp);
+    complited[inp["theme"]]["lvls"][inp["lvl"]] = true;
+    if (!Object.values(complited[inp["theme"]]["lvls"]).includes(false)) {
+        complited[inp["theme"]]["complited"] = true;
+    }
+    console.log(JSON.stringify(complited));
+    res.send({body:"good"});
+});
+app.post('/check/:theme/:lvl', (req, res) => {
+    let inp = req.params;
+    res.send({body:complited[inp["theme"]]["lvls"][inp["lvl"]]});
+});
+
+app.all('*', (req, res) => {
+    res.status(404)
+    res.render(views+"static/404");
+});
+app.listen(process.env.PORT || 3621, () => console.log("server for puzzle started UwU"));

views/condition/lvl-1.ejs

@@ -0,0 +1,17 @@
+<%- include('../static/start.ejs') %>
+<%- include('../lvls/lvls_1.ejs') %>
+
+
+<%
+inputs = 1;
+task = 'Составить программу, которая спрашивает возраст человека i/1 и, если ему 18 лет и больше, сообщает “Замечательно. Вы уже можете водить автомобиль”, а в противном случае – “К сожалению, водить автомобиль Вам рановато”.';
+code ="let age = i/1; /%"+
+      "if (age >= '18') _% { /%"+
+      "return 'Замечательно. Вы уже можете водить автомобиль'; _% } /%"+
+      "else _% { /%"+
+      "return 'К сожалению, водить автомобиль Вам рановато'; _% }"
+%>
+
+<%- include('../static/header.ejs') %>
+<%- include('../lvls/lvls_2.ejs') %>
+<%- include('../static/end.ejs') %>

views/condition/lvl-2.ejs

@@ -0,0 +1,21 @@
+<%- include('../static/start.ejs') %>
+<%- include('../lvls/lvls_1.ejs') %>
+
+
+<%
+inputs = 3;
+task = 'Даны три целых числа [ i/1 i/2 i/3 ], одно из которых отлично от двух других, равных между собой. Определить порядковый номер числа, отличного от остальных.';
+code ="let num_1 = i/1; /%"+
+      "let num_2 = i/2; /%"+
+      "let num_3 = i/3; /%"+
+      "if (num_1 == num_2) _% { /%"+
+      "return 'число под номером 3 отличного от остальных'; _% } /%"+
+      "else if (num_1 == num_3) _% { /%"+
+      "return 'число под номером 2 отличного от остальных'; _% } /%"+
+      "else { /%"+
+      "return 'число под номером 1 отличного от остальных'; _% }"
+%>
+
+<%- include('../static/header.ejs') %>
+<%- include('../lvls/lvls_2.ejs') %>
+<%- include('../static/end.ejs') %>

views/condition/lvl-3.ejs

@@ -0,0 +1,19 @@
+<%- include('../static/start.ejs') %>
+<%- include('../lvls/lvls_1.ejs') %>
+
+
+<%
+inputs = 1;
+task = 'Человек вводит в компьютер число i/1. Если оно находится в интервале от 28 до 30, то нужно напечатать текст ПОПАЛ, если оно больше 30 — то ПЕРЕЛЁТ, если оно меньше 28, то НЕДОЛЁТ.';
+code ="let int = i/1; /%"+
+      "if (int <= 30 && int >= 28) _% { /%"+
+      "return 'ПОПАЛ'; _% } /%"+
+      "else if (int > 30) _% { /%"+
+      "return 'ПЕРЕЛЁТ'; _% } /%"+
+      "else if (int < 28) _% { /%"+
+      "return 'НЕДОЛЁТ'; _% }"
+%>
+
+<%- include('../static/header.ejs') %>
+<%- include('../lvls/lvls_2.ejs') %>
+<%- include('../static/end.ejs') %>

views/condition/lvl-4.ejs

@@ -0,0 +1,17 @@
+<%- include('../static/start.ejs') %>
+<%- include('../lvls/lvls_1.ejs') %>
+
+<%
+inputs = 1;
+task = 'Ввести число i/1. Если оно неотрицательно, вычесть из него 50, в противном случае прибавить к нему 100.';
+code ="let int = i/1; /%"+
+      "if (int < 0) _% { /%"+
+      "int += 100; _% } /%"+
+      "else _% { /%"+
+      "int -= 50; _% } /%"+
+      "return int; _% "
+%>
+
+<%- include('../static/header.ejs') %>
+<%- include('../lvls/lvls_2.ejs') %>
+<%- include('../static/end.ejs') %>

views/condition/lvl-5.ejs

@@ -0,0 +1,17 @@
+<%- include('../static/start.ejs') %>
+<%- include('../lvls/lvls_1.ejs') %>
+
+
+<%
+inputs = 2;
+task = 'Ввести 2 числа [ i/1 i/2 ]. Если их произведение отрицательно, умножить его на –2 и вывести на экран, в противном случае увеличить его в 1,5 раза и вывести на экран.';
+code ="let a = i/1, b = i/2; /%"+
+      "if (a * b < 0) _% { /%"+
+      "return ((a * b) * -2); _% } /%"+
+      "else _% { /%"+
+      "return ((a * b) * 1.5); _% }"
+%>
+
+<%- include('../static/header.ejs') %>
+<%- include('../lvls/lvls_2.ejs') %>
+<%- include('../static/end.ejs') %>

views/consecution/lvl-1.ejs

@@ -0,0 +1,15 @@
+<%- include('../static/start.ejs') %>
+<%- include('../lvls/lvls_1.ejs') %>
+
+<%
+inputs = 1;
+task = "Написать программу, которая подсчитывает: периметр квадрата, площадь которого равна i/1";
+code ="let S = i/1; /%"+
+      "let s = Math.sqrt(S); /%"+
+      "let P = 4 * s; /%"+
+      "return `периметр квадрата равен ${P}`;";      
+%>
+
+<%- include('../static/header.ejs') %>
+<%- include('../lvls/lvls_2.ejs') %>
+<%- include('../static/end.ejs') %>

views/consecution/lvl-2.ejs

@@ -0,0 +1,18 @@
+<%- include('../static/start.ejs') %>
+<%- include('../lvls/lvls_1.ejs') %>
+
+<%
+inputs = 1;
+task = "Написать программу, которая подсчитывает: площадь равностороннего треугольника, периметр которого равен i/1";
+code ="let P = i/1; /%"+
+      "let a = P / 3;/%"+
+      "let S = (Math.pow(a,2) * Math.sqrt(3)) / 4;/%"+
+      "return `площадь равностороннего треугольника равна ${S}`"
+%>
+<script>
+  let p = 15;
+</script>
+
+<%- include('../static/header.ejs') %>
+<%- include('../lvls/lvls_2.ejs') %>
+<%- include('../static/end.ejs') %>

views/consecution/lvl-3.ejs

@@ -0,0 +1,15 @@
+<%- include('../static/start.ejs') %>
+<%- include('../lvls/lvls_1.ejs') %>
+
+<%
+inputs = 4;
+task = "Написать программу, которая подсчитывает: расстояние между точками с координатами i/1, i/2 и i/3, i/4";
+code ="let A = Math.pow((i/1-i/2),2); /%"+
+      "let B = Math.pow((i/3-i/4),2); /%"+
+      "let AB = Math.sqrt(A+B); /%"+
+      "return `расстояние между точками равно ${AB}`;"
+%>
+
+<%- include('../static/header.ejs') %>
+<%- include('../lvls/lvls_2.ejs') %>
+<%- include('../static/end.ejs') %>

views/consecution/lvl-4.ejs

@@ -0,0 +1,16 @@
+<%- include('../static/start.ejs') %>
+<%- include('../lvls/lvls_1.ejs') %>
+
+
+<%
+inputs = 2;
+task = "Написать программу, которая подсчитывает: среднее арифметическое кубов двух чисел i/1 и i/2";
+code ="let a = i/1*i/1*i/1; /%"+
+      "let b = i/2*i/2*i/2; /%"+
+      "let awg = ((a+b)/2); /%"+
+      "return `среднее арифметическое кубов двух чисел равна ${awg}`;"
+%>
+
+<%- include('../static/header.ejs') %>
+<%- include('../lvls/lvls_2.ejs') %>
+<%- include('../static/end.ejs') %>

views/consecution/lvl-5.ejs

@@ -0,0 +1,15 @@
+<%- include('../static/start.ejs') %>
+<%- include('../lvls/lvls_1.ejs') %>
+
+<%
+inputs = 2;
+task = "Написать программу, которая подсчитывает: среднее геометрическое модулей двух чисел i/1 и i/2";
+code ="let a = Math.abs(i/1); /%"+
+      "let b = Math.abs(i/2); /%"+
+      "let awg_geo = Math.sqrt((a*b),2); /%"+
+      "return `среднее геометрическое модулей двух чисел равно ${awg_geo}`;"
+%>
+
+<%- include('../static/header.ejs') %>
+<%- include('../lvls/lvls_2.ejs') %>
+<%- include('../static/end.ejs') %>

views/looping/lvl-1.ejs

@@ -0,0 +1,17 @@
+<%- include('../static/start.ejs') %>
+<%- include('../lvls/lvls_1.ejs') %>
+
+
+<%
+inputs = 9;
+task = 'Известна масса каждого из 9 предметов. Определить общую массу всего набора предметов: _% [ i/1 i/2 i/3 i/4 i/5 i/6 i/7 i/8 i/9 ]';
+code ="let mas = [ i/1 , i/2 , i/3 , i/4 , i/5 , i/6 , i/7 , i/8 , i/9]; /%"+
+      "let sum = 0; /%"+
+      "for(let i = 0; i < 12; i++) _% { /%"+
+      "sum += mas[i]; _% } /%"+
+      "return sum;"
+%>
+
+<%- include('../static/header.ejs') %>
+<%- include('../lvls/lvls_2.ejs') %>
+<%- include('../static/end.ejs') %>

views/looping/lvl-2.ejs

@@ -0,0 +1,17 @@
+<%- include('../static/start.ejs') %>
+<%- include('../lvls/lvls_1.ejs') %>
+
+
+<%
+inputs = 4;
+task = 'Известны оценки абитуриента на четырех экзаменах [ i/1 i/2 i/3 i/4 ]. Определить сумму набранных им баллов.';
+code ="let exams = [i/1,i/2,i/3,i/4]; /%"+
+      "let sum = 0; /%"+
+      "for(let i = 0; i < exams.length; i++) _% { /%"+
+      "sum += exams[i]; _% } /%"+
+      "return `сумму набранных баллов равна ${sum}`; _% "
+%>
+
+<%- include('../static/header.ejs') %>
+<%- include('../lvls/lvls_2.ejs') %>
+<%- include('../static/end.ejs') %>

views/looping/lvl-3.ejs

@@ -0,0 +1,16 @@
+<%- include('../static/start.ejs') %>
+<%- include('../lvls/lvls_1.ejs') %>
+
+<%
+inputs = 1;
+task = 'Написать программу, которая выводит на экран таблицу стоимости яблок, в диапазоне от 100 г до 1 кг с шагом 100. Где цена за 100 г i/1';
+code ="let cost = i/1; /%"+
+      "let cost_table = []; /%"+
+      "for(let i = 100; i <= 1000; i+=100) _% { /%"+
+      "cost_table.push(`${i} г. = ${(cost / 100) * i} руб.`); _% } /%"+
+      "return cost_table;"
+%>
+
+<%- include('../static/header.ejs') %>
+<%- include('../lvls/lvls_2.ejs') %>
+<%- include('../static/end.ejs') %>

views/looping/lvl-4.ejs

@@ -0,0 +1,18 @@
+<%- include('../static/start.ejs') %>
+<%- include('../lvls/lvls_1.ejs') %>
+
+<%
+inputs = 0;
+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') %>
+<%- include('../lvls/lvls_2.ejs') %>
+<%- include('../static/end.ejs') %>

views/looping/lvl-5.ejs

@@ -0,0 +1,19 @@
+<%- include('../static/start.ejs') %>
+<%- include('../lvls/lvls_1.ejs') %>
+
+<%
+inputs = 0;
+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); _% } /%"+
+      "return nums;"
+%>
+
+<%- include('../static/header.ejs') %>
+<%- include('../lvls/lvls_2.ejs') %>
+<%- include('../static/end.ejs') %>

views/lvls/lvls_1.ejs

@@ -0,0 +1,56 @@
+<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;
+    }
+    .code_input{
+      width: 25px;
+    }
+    </style>
+    

views/lvls/lvls_2.ejs

@@ -0,0 +1,313 @@
+
+
+<section class="main">
+  <div class="task" style="margin-bottom: 50px;"><b>Задача: </b> <div id="task"></div> </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>
+  let task = "<%= task %>".replace("_%","\n");
+  let i_length = "<%= inputs %>";
+  console.log(i_length);
+  for (let i = 1; i <= i_length; i++) {
+    console.log(`i/${i}`);
+    task = task.replaceAll(`i/${i}`,`<input id='input-${i}' class='code_input' oninput="input_check()" value='${Math.floor(Math.random() * 101)}'>`);    
+  }
+  document.getElementById("task").innerHTML = task;
+</script>
+
+<script>
+  function test(arr) {
+    let str = "";
+    // 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";
+        document.getElementById("test-res").innerText = test_out;
+      } catch (error) {
+        if (error != "SyntaxError: Unexpected token ')'"){
+          document.getElementById(`ans-${element}`).style.backgroundColor = "red";
+          test_out = error;
+          document.getElementById("test-res").innerText = test_out;
+          return false;
+        }
+        // else if (error = "SyntaxError: Unexpected token '}'" && document.getElementById(`ans-${element}`).innerText.includes("{")){
+        //   document.getElementById(`ans-${element}`).style.backgroundColor = "green";
+        // }
+        else{
+          document.getElementById(`ans-${element}`).style.backgroundColor = "green";
+        }
+      }
+    }
+    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 input_check() {
+    let codes = document.getElementsByClassName("drag");
+    Object.entries(codes).forEach(([key,value]) => {
+      console.log(key);
+      let cods = code[value.id.split("-").at(-1)];
+      for (let i = 1; i <= i_length; i++) {
+        console.log(`i/${i}`);
+        console.log(cods);
+        cods = cods.replaceAll(`i/${i}`,document.getElementById(`input-${i}`).value)
+      }
+      console.log(cods);
+      value.innerText = cods;
+    });
+  }
+
+  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() {
+  let code_text = "<%-code%>";
+  code = code_text.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.innerHTML = 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);
+  });
+  input_check() 
+}
+
+  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>

views/main.ejs

@@ -0,0 +1,97 @@
+<%- include('./static/start.ejs') %>
+
+<style>
+    .levels{
+        display: flex;
+        justify-content: space-between;
+    }
+    .levels div{
+        text-align: center;
+    }
+    .lvl{
+        width: 100px;
+        height: 40px;
+        line-height: 35px;
+        cursor: pointer;
+        margin: auto;
+        padding: 5px;
+        border: 1px gray solid;
+        display: flex;
+        justify-content: space-around;
+        /* background-color: gray; */
+        border-radius: 10px;
+        margin: 10px;
+        margin-block: 40px;
+    }
+</style>
+
+<section class="main">
+    <div class="header" style="margin-block: 40px;"><h1>программирование javascript</h1></div>
+    <div class="levels">
+        <!-- <div class="branching"><h1>Ветвление</h1>
+            <div class="lvl_tab"></div>
+        </div>
+        <div class="looping"><h1>Циклы</h1>
+            <div class="lvl_tab"></div>
+        </div> -->
+    </div>
+</section>
+
+<script>
+    console.log('<%- complited %>');
+    let complited = JSON.parse('<%- complited %>')
+    check_lvls();
+    function check_lvls() {
+        Object.entries(complited).forEach(([theme,vars]) => {
+            let theme_div = document.createElement("div")
+            let theme_div_name = document.createElement("h1")
+            let theme_div_tab = document.createElement("div")
+            theme_div.classList.add(theme)
+            theme_div.classList.add(`theme-${vars["id"]}`)
+            theme_div.setAttribute("complited",vars["complited"])
+            theme_div_name.innerText = vars["name"];
+            theme_div_tab.classList.add("lvl_tab");
+            theme_div.appendChild(theme_div_name);
+            theme_div.appendChild(theme_div_tab);
+
+            document.getElementsByClassName("levels")[0].appendChild(theme_div)
+            
+            Object.entries(vars["lvls"]).forEach(([lvl,lvl_stat]) => {
+                let div = document.createElement("div");
+                div.classList.add("lvl")
+                div.id = `/${theme}/${lvl}`;
+                div.innerText = `уровень ${lvl}`;
+
+                if(lvl_stat){
+                    div.style.backgroundColor = "green";div.style.color = "white";
+                    div.setAttribute("onclick",`goto('/${theme}/${lvl}')`);
+                }else{
+
+                    if (vars["lvls"][lvl-1] == true || lvl == 1) {
+                        if(vars["id"]==1 || document.getElementsByClassName(`theme-${vars["id"]-1}`)[0].getAttribute("complited") == "true"){
+                            div.setAttribute("onclick",`goto('/${theme}/${lvl}')`);
+                        }else{
+                            div.setAttribute("onclick",`alert('Выполните предыдущую тему')`);
+                        }
+                    }else{
+                        div.setAttribute("onclick",`alert('Выполните предыдущий уровень')`);
+                    }
+                }
+
+                document.getElementsByClassName(theme)[0].getElementsByClassName("lvl_tab")[0].appendChild(div)
+            });
+        });
+    }
+
+    function check_lvl(theme,lvl) {
+        $.post(`/check/${theme}/${lvl}`)
+        .done(function( res ) {
+            console.log(res["body"]);
+            if(res["body"] == true){
+                return true;
+            }
+        })
+    }
+</script>
+
+<%- include('./static/end.ejs') %>

views/old/condition/lvl-1.ejs

@@ -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') %>

views/old/condition/lvl-2.ejs

@@ -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') %>

views/old/condition/lvl-3.ejs

@@ -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') %>

views/old/condition/lvl-4.ejs

@@ -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') %>

views/old/condition/lvl-5.ejs

@@ -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') %>

views/old/consecution/lvl-1.ejs

@@ -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') %>

views/old/consecution/lvl-2.ejs

@@ -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') %>

views/old/consecution/lvl-3.ejs

@@ -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') %>

views/old/consecution/lvl-4.ejs

@@ -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') %>

views/old/consecution/lvl-5.ejs

@@ -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') %>

views/old/looping/lvl-1.ejs

@@ -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') %>

views/old/looping/lvl-2.ejs

@@ -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') %>

views/old/looping/lvl-3.ejs

@@ -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') %>

views/old/looping/lvl-4.ejs

@@ -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') %>

views/old/looping/lvl-5.ejs

@@ -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') %>

views/static/404.ejs

@@ -0,0 +1,6 @@
+<%- include('../static/start.ejs') %>
+
+<h1 style="justify-content: space-around; display: flex;">oops</h1>
+<script>goto("/")</script>
+
+<%- include('../static/end.ejs') %>

views/static/end.ejs

@@ -0,0 +1,9 @@
+<!-- <button onclick="
+    Object.entries(code).forEach(([key,value]) => {
+      answer[key] = key;
+      document.getElementById(`ask-${key}`).appendChild(document.getElementById(`ans-${key}`));
+    });
+    check_task();
+">выполнить</button> -->
+</body>
+</html>

views/static/header.ejs

@@ -0,0 +1,33 @@
+<style>
+    .header{
+        display: flex;
+        padding: 5px;
+        margin: 5px;
+        justify-content: space-evenly;
+        margin-top: 20px;
+        margin-bottom: 40px;
+    }
+    .title{
+        display: flex;
+        justify-content: space-evenly;
+    }
+</style>
+<div class="title">
+    <h1><%= theme_name %> уровень <%= lvl %>  </h1>
+</div>
+<div class="header">
+    <button onclick="goto('/')">На главную</button>
+    <div class="header_btn1"></div>
+    <div class="header_btn2"></div>
+    <div class="header_btn3"></div>
+</div>
+
+<script>
+    if(parseInt("<%= lvl %>") > 1){
+        let next_btn = document.createElement("button")
+        next_btn.setAttribute("onclick",`goto('/<%= theme %>/<%= lvl-1 %>')`);
+        next_btn.innerText = "предыдущий уровень";   
+        document.getElementsByClassName("header_btn1")[0].innerHTML="";
+        document.getElementsByClassName("header_btn1")[0].appendChild(next_btn);
+    }
+</script>

views/static/start.ejs

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="/lib/interact.js"></script>
+    <script src="/lib/jquery.js"></script>
+    <script src="/lib/functions.js"></script>
+    <script src="/lib/jquery.cookie.js"></script>
+</head>
+<body>
+    <style>
+        *{
+            user-select: none;
+            font-size: 16pt;
+        }
+        .main{
+            margin: auto auto;
+            display: block;
+            width: 90vw;
+            
+        }
+        .header{
+            display: flex;
+        }
+        .header h1{
+            margin: auto;
+        }
+        li{
+            list-style-type: none;
+        }
+        ul{
+            padding: 0px;
+        }
+        button{
+            padding: 5px;
+            border: 1px cornflowerblue solid;
+            border-radius: 5px;
+            background-color: white;
+            cursor: pointer;
+        }
+    </style>