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