Skip to content

Instantly share code, notes, and snippets.

@Boris-creator

Boris-creator/index.html

Created July 21, 2020 20:31
Show Gist options
  • Save Boris-creator/36e6840b126893020557ab904af965a5 to your computer and use it in GitHub Desktop.
Save Boris-creator/36e6840b126893020557ab904af965a5 to your computer and use it in GitHub Desktop.
Download ZIP
VweqRLN
Raw
index.html
<body>
<div class="wrapper">
<header>
<p>
<a href="index.php">
ColorEyesKeeper :)
</a>
</p>
</header>
<div id='navbar'>
<nav>
<span>
<a href='connecting.php'>
Вход.
</a>
</span>
<span>
<a href="sharpness.php">
Проверка остроты зрения онлайн
</a>
</span>
<span>
<a href='registration.php'>
Регистрация
</a>
</span>
</nav>
<div id="menu_button" onclick="document.querySelector('nav').classList.toggle('active')">
&#9776;
</div>
</div>
<script>
document.body.addEventListener('click', (e) => {
if (!(e.target.closest('nav')) && !e.target.closest('#menu_button')) {
document.querySelector('nav').classList.remove('active')
}
})
</script>
<input id="distance" placeholder="Расстояние в см">
<button id="subm">
подтвердить
</button>
<div id="infoblock">
<!--<p id="countSeries">Номер текущей серии</p>-->
<button id="start">
Старт
</button>
<p id="alert">
Подсказка
</p>
</div>
<div id="area">
<div id="prepl">
<svg viewBox="0 0 744.09448819 744.3622047" preserveAspectRatio="xMinYMin meet">
<g>
<rect class="background2" x="0" y="0" width="344.09448819" height="344.3622047" fill="red" />
<rect class="background4" x="344.09448819" y="344.3622047" width="444.09448819" height="744.3622047" fill="blue" />
<rect class="background3" x="0" y="344.3622047" width="344.09448819" height="444.3622047" fill="yellow" />
<rect class="background1" x="344.09448819" y="0" width="444.09448819" height="344.3622047" fill="green" />
</g>
<g class="stimul" transform="translate(896.29154,31.74396)">
<!--<path class="stimul" d="" style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.99351662px; stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />-->
</g>
</svg>
<button class="answer" value="0">
Нет
</button>
</div>
<div id="test">
<svg viewBox="0 0 744.09448819 744.3622047" preserveAspectRatio="xMinYMin meet">
<g>
<rect class="background2" x="0" y="0" width="344.09448819" height="344.3622047" fill="red" />
<rect class="background4" x="344.09448819" y="344.3622047" width="444.09448819" height="744.3622047" fill="blue" />
<rect class="background3" x="0" y="344.3622047" width="344.09448819" height="444.3622047" fill="yellow" />
<rect class="background1" x="344.09448819" y="0" width="444.09448819" height="344.3622047" fill="green" />
</g>
<g class="stimul" transform="translate(896.29154,31.74396)">
<!--<path class="stimul" d="" style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.99351662px; stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />-->
</g>
</svg>
</div>
<div id="prepr">
<svg viewBox="0 0 744.09448819 744.3622047" preserveAspectRatio="xMinYMin meet">
<g>
<rect class="background2" x="0" y="0" width="344.09448819" height="344.3622047" fill="red" />
<rect class="background4" x="344.09448819" y="344.3622047" width="444.09448819" height="744.3622047" fill="blue" />
<rect class="background3" x="0" y="344.3622047" width="344.09448819" height="444.3622047" fill="yellow" />
<rect class="background1" x="344.09448819" y="0" width="444.09448819" height="344.3622047" fill="green" />
</g>
<g class="stimul" transform="translate(896.29154,31.74396)">
<!--<path class="stimul" d="" style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.99351662px; stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />-->
</g>
</svg>
<button class="answer" value="1">
Да
</button>
</div>
</div>
<!--<p style="font-size:1.2em; line-height:1.6em; padding:2em;">
Таблица, из которой выводятся данные, здесь: <a href="rings2.csv">rings.csv</a>. Под каждое предъявление стимула две строчки: в первой данные о цвете кольца в боковом поле, во второй данные о цвете фона и стимула в центральном поле.
</p>-->
</div>
<footer>
&copy; 2020
</footer>
</body>
Raw
script.js
$(document).ready(function () {
/*alert("время сеанса: "+localStorage.general_time+", длительность Сравнения:"+localStorage.compare_time+", число циклов в Сравнении:"+localStorage.compare_series+", длительность Определения:"+localStorage.definition_time+", число циклов в Определении:"+localStorage.definition_series
);*/
/* $.ajax({
url: "svg.html",
type: 'GET',
success: function(res){alert(res);//const params=res.split("
").map(row=>row.split(","))
},
error: function(){alert("не удалось считать данные из таблицы.")}
});*/
let params;
params = `{"task":"compare","name":"Circle2","type":"нет","size_min":"0","size_max":"0","time_min":"3000","time_max":"4500","pos_field_0":"A","cx_field_0":100,"cy_field_0":100,"color_r_field_0":"0","color_g_field_0":"255","color_b_field_0":"32","bgcolor1_r_field_0":"224","bgcolor1_g_field_0":"32","bgcolor1_b_field_0":"192","bgcolor2_r_field_0":"224","bgcolor2_g_field_0":"32","bgcolor2_b_field_0":"192","bgcolor3_r_field_0":"224","bgcolor3_g_field_0":"32","bgcolor3_b_field_0":"192","bgcolor4_r_field_0":"224","bgcolor4_g_field_0":"32","bgcolor4_b_field_0":"192","pos_field_1":"B","cx_field_1":-20,"cy_field_1":50,"color_r_field_1":"255","color_g_field_1":"0","color_b_field_1":"32","bgcolor1_r_field_1":"128","bgcolor1_g_field_1":"0","bgcolor1_b_field_1":"64","bgcolor2_r_field_1":"128","bgcolor2_g_field_1":"0","bgcolor2_b_field_1":"64","bgcolor3_r_field_1":"128","bgcolor3_g_field_1":"0","bgcolor3_b_field_1":"64","bgcolor4_r_field_1":"128","bgcolor4_g_field_1":"0","bgcolor4_b_field_1":"64","pos_field_2":"C","cx_field_2":0,"cy_field_2":0,"color_r_field_2":"0","color_g_field_2":"0","color_b_field_2":"255","bgcolor1_r_field_2":"128","bgcolor1_g_field_2":"64","bgcolor1_b_field_2":"0","bgcolor2_r_field_2":"128","bgcolor2_g_field_2":"64","bgcolor2_b_field_2":"0","bgcolor3_r_field_2":"128","bgcolor3_g_field_2":"64","bgcolor3_b_field_2":"0","bgcolor4_r_field_2":"128","bgcolor4_g_field_2":"64","bgcolor4_b_field_2":"0"}>>
{"task":"compare","name":"Circle2","type":"нет","size_min":"0","size_max":"0","time_min":"3000","time_max":"4500","pos_field_0":"A","cx_field_0":100,"cy_field_0":100,"color_r_field_0":"0","color_g_field_0":"255","color_b_field_0":"32","bgcolor1_r_field_0":"224","bgcolor1_g_field_0":"32","bgcolor1_b_field_0":"192","bgcolor2_r_field_0":"224","bgcolor2_g_field_0":"32","bgcolor2_b_field_0":"192","bgcolor3_r_field_0":"224","bgcolor3_g_field_0":"32","bgcolor3_b_field_0":"192","bgcolor4_r_field_0":"224","bgcolor4_g_field_0":"32","bgcolor4_b_field_0":"192","pos_field_1":"B","cx_field_1":-20,"cy_field_1":50,"color_r_field_1":"255","color_g_field_1":"0","color_b_field_1":"32","bgcolor1_r_field_1":"128","bgcolor1_g_field_1":"0","bgcolor1_b_field_1":"64","bgcolor2_r_field_1":"128","bgcolor2_g_field_1":"0","bgcolor2_b_field_1":"64","bgcolor3_r_field_1":"128","bgcolor3_g_field_1":"0","bgcolor3_b_field_1":"64","bgcolor4_r_field_1":"128","bgcolor4_g_field_1":"0","bgcolor4_b_field_1":"64","pos_field_2":"C","cx_field_2":0,"cy_field_2":0,"color_r_field_2":"0","color_g_field_2":"0","color_b_field_2":"255","bgcolor1_r_field_2":"128","bgcolor1_g_field_2":"64","bgcolor1_b_field_2":"0","bgcolor2_r_field_2":"128","bgcolor2_g_field_2":"64","bgcolor2_b_field_2":"0","bgcolor3_r_field_2":"128","bgcolor3_g_field_2":"64","bgcolor3_b_field_2":"0","bgcolor4_r_field_2":"128","bgcolor4_g_field_2":"64","bgcolor4_b_field_2":"0"}>>
{"task":"compare","name":"Circle2","type":"нет","size_min":"0","size_max":"0","time_min":"3000","time_max":"4500","pos_field_0":"A","cx_field_0":100,"cy_field_0":100,"color_r_field_0":"0","color_g_field_0":"255","color_b_field_0":"32","bgcolor1_r_field_0":"224","bgcolor1_g_field_0":"32","bgcolor1_b_field_0":"192","bgcolor2_r_field_0":"224","bgcolor2_g_field_0":"32","bgcolor2_b_field_0":"192","bgcolor3_r_field_0":"224","bgcolor3_g_field_0":"32","bgcolor3_b_field_0":"192","bgcolor4_r_field_0":"224","bgcolor4_g_field_0":"32","bgcolor4_b_field_0":"192","pos_field_1":"B","cx_field_1":-20,"cy_field_1":50,"color_r_field_1":"255","color_g_field_1":"0","color_b_field_1":"32","bgcolor1_r_field_1":"128","bgcolor1_g_field_1":"0","bgcolor1_b_field_1":"64","bgcolor2_r_field_1":"128","bgcolor2_g_field_1":"0","bgcolor2_b_field_1":"64","bgcolor3_r_field_1":"128","bgcolor3_g_field_1":"0","bgcolor3_b_field_1":"64","bgcolor4_r_field_1":"128","bgcolor4_g_field_1":"0","bgcolor4_b_field_1":"64","pos_field_2":"C","cx_field_2":0,"cy_field_2":0,"color_r_field_2":"0","color_g_field_2":"0","color_b_field_2":"255","bgcolor1_r_field_2":"128","bgcolor1_g_field_2":"64","bgcolor1_b_field_2":"0","bgcolor2_r_field_2":"128","bgcolor2_g_field_2":"64","bgcolor2_b_field_2":"0","bgcolor3_r_field_2":"128","bgcolor3_g_field_2":"64","bgcolor3_b_field_2":"0","bgcolor4_r_field_2":"128","bgcolor4_g_field_2":"64","bgcolor4_b_field_2":"0"}>>
{"task":"compare","name":"Circle2","type":"нет","size_min":"0","size_max":"0","time_min":"3000","time_max":"4500","pos_field_0":"A","cx_field_0":100,"cy_field_0":100,"color_r_field_0":"0","color_g_field_0":"255","color_b_field_0":"32","bgcolor1_r_field_0":"224","bgcolor1_g_field_0":"32","bgcolor1_b_field_0":"192","bgcolor2_r_field_0":"224","bgcolor2_g_field_0":"32","bgcolor2_b_field_0":"192","bgcolor3_r_field_0":"224","bgcolor3_g_field_0":"32","bgcolor3_b_field_0":"192","bgcolor4_r_field_0":"224","bgcolor4_g_field_0":"32","bgcolor4_b_field_0":"192","pos_field_1":"B","cx_field_1":-20,"cy_field_1":50,"color_r_field_1":"255","color_g_field_1":"0","color_b_field_1":"32","bgcolor1_r_field_1":"128","bgcolor1_g_field_1":"0","bgcolor1_b_field_1":"64","bgcolor2_r_field_1":"128","bgcolor2_g_field_1":"0","bgcolor2_b_field_1":"64","bgcolor3_r_field_1":"128","bgcolor3_g_field_1":"0","bgcolor3_b_field_1":"64","bgcolor4_r_field_1":"128","bgcolor4_g_field_1":"0","bgcolor4_b_field_1":"64","pos_field_2":"C","cx_field_2":0,"cy_field_2":0,"color_r_field_2":"0","color_g_field_2":"0","color_b_field_2":"255","bgcolor1_r_field_2":"128","bgcolor1_g_field_2":"64","bgcolor1_b_field_2":"0","bgcolor2_r_field_2":"128","bgcolor2_g_field_2":"64","bgcolor2_b_field_2":"0","bgcolor3_r_field_2":"128","bgcolor3_g_field_2":"64","bgcolor3_b_field_2":"0","bgcolor4_r_field_2":"128","bgcolor4_g_field_2":"64","bgcolor4_b_field_2":"0"}>>
{"task":"compare","name":"Circle2","type":"нет","size_min":"0","size_max":"0","time_min":"3000","time_max":"4500","pos_field_0":"A","cx_field_0":100,"cy_field_0":100,"color_r_field_0":"0","color_g_field_0":"255","color_b_field_0":"32","bgcolor1_r_field_0":"224","bgcolor1_g_field_0":"32","bgcolor1_b_field_0":"192","bgcolor2_r_field_0":"224","bgcolor2_g_field_0":"32","bgcolor2_b_field_0":"192","bgcolor3_r_field_0":"224","bgcolor3_g_field_0":"32","bgcolor3_b_field_0":"192","bgcolor4_r_field_0":"224","bgcolor4_g_field_0":"32","bgcolor4_b_field_0":"192","pos_field_1":"B","cx_field_1":-20,"cy_field_1":50,"color_r_field_1":"255","color_g_field_1":"0","color_b_field_1":"32","bgcolor1_r_field_1":"128","bgcolor1_g_field_1":"0","bgcolor1_b_field_1":"64","bgcolor2_r_field_1":"128","bgcolor2_g_field_1":"0","bgcolor2_b_field_1":"64","bgcolor3_r_field_1":"128","bgcolor3_g_field_1":"0","bgcolor3_b_field_1":"64","bgcolor4_r_field_1":"128","bgcolor4_g_field_1":"0","bgcolor4_b_field_1":"64","pos_field_2":"C","cx_field_2":0,"cy_field_2":0,"color_r_field_2":"0","color_g_field_2":"0","color_b_field_2":"255","bgcolor1_r_field_2":"128","bgcolor1_g_field_2":"64","bgcolor1_b_field_2":"0","bgcolor2_r_field_2":"128","bgcolor2_g_field_2":"64","bgcolor2_b_field_2":"0","bgcolor3_r_field_2":"128","bgcolor3_g_field_2":"64","bgcolor3_b_field_2":"0","bgcolor4_r_field_2":"128","bgcolor4_g_field_2":"64","bgcolor4_b_field_2":"0"}`
.split(/\>\>/g)
.map((c) => JSON.parse(c))
.filter((c) => c.task == "compare");
document.body.insertAdjacentHTML("beforeend", JSON.stringify(params));
$.ajax("Test_0.txt")
.done((data) => {
params = data
.split(/\s/g)
.slice(0, 2)
.map((c) => JSON.parse(c));
alert(params.length);
alert(params);
//alert(JSON.parse(params).task);
})
.fail(function () {
//alert('error');
});
const test = $("#test svg"), //центральное поле
left = $("#prepl svg"), //левое поле
right = $("#prepr svg"), //правое поле
alarm = $("#alert");
//alert(right.find(".stimul"));
//alert(right)
/*----------------------обратный отсчет-----------------------------------*/
function itshowtime() {
if (!localStorage.endTime) {
return;
}
const s = setInterval(() => {
const waste = (+localStorage.endTime - +new Date()) / 1000;
//alert(waste);
if (waste <= 1) {
clearInterval(s);
} else {
$("#timer").html(
Math.floor(waste / 60) + "." + ((waste % 60) - 1).toFixed(0)
);
}
}, 1000);
}
//itshowtime();
//-------------------------------Вычисление параметров экрана--------------------------------------//
function calculate() {
const display_height = document.documentElement.clientHeight,
display_width = document.documentElement.clientWidth;
//alert(display_height+" "+display_width);
$("#test").css({
"max-width": (display_height * 7) / 10 + "px"
});
}
calculate();
$(window).resize(calculate);
$("#start").click(function () {
limit = +new Date() + general_time * 60 * 1000;
show(params);
$("#start").css({
display: "none"
});
if (window.screen.width >= 800) {
$("#arrows").css({
display: "block"
});
$("#arrows").focus();
}
});
//-----------------------------------------------------------------------------------------//
const buttons = [...document.querySelectorAll(".answer")];
//кнопки да/нет
//-----------------------------Управление юзера--------------------------------------------//
let activ = false;
// когда false, не реагируем на действия юзера;
//for(let answer of document.querySelectorAll('.answer')){ answer.classList.add('inactive') };
/*document.body.addEventListener("click", function (e) {
if (!e.target.closest(".answer")) {
return;
};
const answer = e.target.closest(".answer");
//if(answer.classList.contains('inactive')){alert('!'); return}
if(!activ){return};
if (stimul.dir == +answer.dataset.dir) {
counterW++;
wins.push(1);
console.log("Правильно");
//alarm.html("Правильно!");
alarm.css({"background-color": "#00ff00"})
setTimeout(() => {alarm.html(""); alarm.css({"background-color": "transparent"})
}, 1000);
} else {
counterL++;
wins.push(-1);
alarm.css({"background-color": "#ff0000"})
console.log("Неправильно");
setTimeout(() => {
alarm.textContent = "";
alarm.css({"background-color": "transparent"})
}, 1000);
}
clearTimeout(timer);
clearTimeout(timerClear);
stimul.clear(test);
//bg2.clear(test);
const react_time = new Date();
time_res.push(+react_time - +time);
//console.log(time_res);
//console.log(+react_time- +time)
// next();
setTimeout(()=>{show(params, changing_func)}, 1000);
//console.log(wins);
});*/
/*$('#subm').click(()=>{
distance = parseInt(document.getElementById('distance').value) ? parseInt(document.getElementById('distance').value) : 500;
size=size*distance/500;
usersize=size;
})
document.getElementById("arrows").addEventListener("keydown", function(e){
e.preventDefault();
if(!activ){return};
const i = ["DOM_VK_LEFT", "DOM_VK_RIGHT", "DOM_VK_DOWN", "DOM_VK_UP"].indexOf(e.code), j = [0, 180, 270, 90].indexOf(stimul.dir), kd=["4", "6", "2", "8"].indexOf(e.key), k = ["L", "R", "D", "U"].indexOf(e.key), kl = ["l", "r", "d", "u"].indexOf(e.key);
if(i == j || k == j || kl == j || kd == j){
counterW++; wins.push(1);
alarm.css({"background-color": "#00ff00"});
setTimeout(() => {alarm.css({"background-color":"transparent"});}, 1000);
}
else{
counterL++; wins.push(-1);
alarm.css({"background-color": "#ff0000"});
setTimeout(() => {alarm.css({"background-color":"transpatent"});}, 1000);
};
clearTimeout(timer);
clearTimeout(timerClear);
stimul.clear(test);
setTimeout(()=>{show(params, changing_func)}, 1000);
})*/
/*-------------------конец управления юзера---------------------*/
let distance = 500;
let counter = 0, //счётчик ответов внутри цикла
counterS = 0, //счётчик циклов
end = false;
let sideField;
//флаг сигнализирует о конце испытания
let lastDir;
//последнее направление, чтобы не повторяться.
//функция рандомного выбора:
function random(arr, v) {
const r = Math.floor(Math.random() * (arr.length - 1));
return arr.filter((e) => e !== v)[r];
}
//------------------------------------------функция рандома цвета или положения:
function randomize(n, min, max, p) {
const d = (n * Math.random() * p) / 100;
let s;
if (n - d < min && n + d > max) {
s = 0;
} else if (n - d < min) {
s = 1;
} else if (n + d > max) {
s = -1;
} else {
s = (-1) ** Math.floor(2 * Math.random());
}
return n + d * s;
}
function rand(min, absmin, max, absmax) {
const low = Math.max(min, absmin),
up = Math.min(max, absmax);
return Math.floor(low + Math.random() * (up - low + 1));
}
let sharpness = 1;
/*----------------таймауты--------------*/
let timer;
let timerClear;
let time;
/*-------------------------------------Параметры стимула и фона-------------------------------*/
let size = 1,
usersize = 1;
const dirs = [0, 45, 90, 135, 180, 225, 270, 315], //направления прорези.
dirs_desk = [0, 90, 180, 270];
//то же для ПК.
let initial_time = 1000,
t = initial_time;
//---------------------------------------счетчики ответов-------------------------------------//
let fails = [];
let counterW = 0,
counterL = 0,
counterN = 0;
const wins = [];
//------------------------- Счётчики показов и циклов:
let counter_demo = 0,
counter_circle = 0;
const time_res = [];
let stimul1, stimul2, bg1, bg2;
//---------------Число циклов и показов в цикле, общая продолжительность задания:
let empt = true;
let general_time = localStorage.definition_time,
limit;
//let changing_param;
//alert(changing_params);
// ------------------ устанавливаю случайное число показов в цикле:
function randomD() {
return 4 + Math.floor(Math.random() * 3);
}
let number_demo = randomD();
//---------------------------------------Конструктор фона:------------------------------------
class Bg {
constructor(color, x, y) {
this.color = color;
}
create(
svg,
x,
y,
b1r,
b1g,
b1b,
b2r,
b2g,
b2b,
b3r,
b3g,
b3b,
b4r,
b4g,
b4b
) {
const bg1 = svg.find(".background1"),
bg2 = svg.find(".background2"),
bg3 = svg.find(".background3"),
bg4 = svg.find(".background4");
//bg.attr("fill", this.setRandomColor());
bg1.attr(
"fill",
"rgba(" + b1r + ", " + b1g + ", " + b1b + ", " + 1 + ")"
);
bg2.attr(
"fill",
"rgba(" + b2r + ", " + b2g + ", " + b2b + ", " + 1 + ")"
);
bg3.attr(
"fill",
"rgba(" + b3r + ", " + b3g + ", " + b3b + ", " + 1 + ")"
);
bg4.attr(
"fill",
"rgba(" + b4r + ", " + b4g + ", " + b4b + ", " + 1 + ")"
);
console.log(bg1.attr("fill"));
const cx = 744.09448819 / 2,
cy = 744.3622047 / 2;
bg1.attr("x", cx + x);
bg2.attr("width", cx + x);
bg1.attr("height", cy + y);
bg1.attr("width", cx - x);
bg2.attr("height", cy + y);
bg4.attr("x", cx + x);
bg4.attr("y", cy + y);
bg4.attr("width", cx - x);
bg3.attr("y", cy + y);
bg3.attr("width", cx + x);
bg3.attr("height", cy - y);
//console.log(bg1.attr("x")+" "+(typeof x)+" "+cx+" "+x)
// bg.attr("width", 400);
// bg.attr("height", 300);
}
clear(svg) {
const bg1 = svg.find(".background1"),
bg2 = svg.find(".background2"),
bg3 = svg.find(".background3"),
bg4 = svg.find(".background4");
for (let rect of [bg1, bg2, bg3, bg4]) {
rect.attr("fill", "#000000");
}
}
setRandomColor() {
const i = (color_max + color_min) / 2;
return (
"rgba(" +
[i, i, i]
.map((v) => Math.floor(randomize(+v, 0, 255, 100)))
.join(", ") +
", 1)"
);
//return "rgba("+this.color.map(v=>Math.floor(randomize(+v, 0, 255, 7))).join(', ')+", 1)";
}
}
//------------------------------------Стимул:---------------------------------------
class Stimul {
constructor(size, color, dir) {
this.size = size;
this.color = color;
this.dir = dir;
const w = 744.09448819,
h = 744.3622047;
this.placeX =
randomize(300, -40 * this.size, w - 200 * this.size, 55) - 300;
this.placeY =
randomize(300, -40 * this.size, h - 200 * this.size, 55) - 300;
}
create(svg) {
const stimul = $(
document.createElementNS("http://www.w3.org/2000/svg", "path")
);
stimul.attr(
"d",
"M -528.17773,169.97852 A 176.66841,176.66841 0 0 0 -701.0625,311.21484 l 79.90234,0 a 103.54649,103.54649 0 0 1 97.15625,-68.11328 103.54649,103.54649 0 0 1 103.54688,103.54492 103.54649,103.54649 0 0 1 -103.54688,103.54883 103.54649,103.54649 0 0 1 -97.20312,-68.11523 l -80.03125,0 a 176.66841,176.66841 0 0 0 173.06055,141.23633 176.66841,176.66841 0 0 0 176.66796,-176.66993 176.66841,176.66841 0 0 0 -176.66796,-176.66796 "
);
stimul.attr("stroke-width", "0.99351662");
stimul.attr("fill-rule", "evenodd");
stimul.attr("fill", "rgba(" + this.color.join(", ") + ", 1)");
console.log(stimul.attr("fill"));
//stimul.attr("fill", "rgba(0, 0, 0, 1)");
stimul.css({
"stroke-linecap": "butt",
"stroke-linejoin": "miter",
"stroke-opacity": "1",
"fill-opacity": "1"
});
stimul.attr(
"transform",
"translate(" +
this.placeX +
" " +
this.placeY +
") translate(" +
(-896.29154 + 744.09448819 / 2) +
" " +
(-31.74396 + 774.3622047 / 2) +
") scale(" +
this.size +
") translate(" +
(896.29154 - 744.09448819 / 2) +
" " +
(31.74396 - 774.3622047 / 2) +
") rotate(" +
this.dir +
" " +
(-896.29154 + 744.09448819 / 2) +
" " +
(-31.74396 + 774.3622047 / 2) +
")"
);
svg.find(".stimul").append(stimul);
$("#randoms").html("Время показа: " + t);
}
clear(svg) {
const stimul = svg.find("path");
stimul.remove();
}
static compare(s1, s2) {
return s1.dir == s2.dir ? true : false;
}
}
const prs = params[0];
const test1 = new Stimul(
1,
[+prs.color_r_field_0, +prs.color_g_field_0, +prs.color_b_field_0],
180
);
test1.create(test); //тестовый запуск
//alert(test.find('.stimul').attr('stroke'))
//---------------------------------------Основная функция---------------------------
//show(params);
function show(parameters) {
const len = parameters.length;
if (end) {
return;
}
distance = +document.getElementById("distance").value || 500;
//--------------- На время показа делаю кнопки неактивными: --------------
activ = false;
//if(!distance){calc(); return};
//alert(counter+" "+number_demo) ;
if (counter == number_demo) {
counter = 0;
counter_circle++;
if (counter_circle == len) {
clearTimeout(timer);
clearTimeout(timerClear);
end = true;
alert("Всё! Испытание закончено.");
return;
}
const now = +new Date();
//if(now>=limit){alert("Время вышло!"); return}
//alert(now+" "+" "+localStorage.endTime+" "+(now - +localStorage.endTime));
//alert(now+" "+localStorage.endTime+" "+now>= +localStorage.endTime);
//if(now >= +localStorage.endTime){alert("Время вышло!"); return}
//--------------------------------- часть с ответами юзера:
/*if(counterW>=Math.floor(number_demo*3/4)){
//counterS++;
if(counterS==number_series){
alert("Испытание завершено. У Вас хороший результат. Давайте ещё раз!")
}
} else{
fails[counterS]=fails[counterS]+1;
//change(counterS); см выше.
alert('В серии недостаточно верных ответов.');
if(fails[counterS]==2){
end=true;
alert('Испытание закончено!');
clearTimeout(timer);
clearTimeout(timerClear);
return;
};
counterS=Math.max(counterS-1, 0);
};
counterW=0;*/
number_demo = randomD();
}
//-----------------------------отрисовка стимула-------------------//
//alert(counterS);
const prs = parameters[counter_circle];
//console.log(prs);
function draw(field){
const direct = random(dirs_desk, lastDir);
lastDir = direct;
const size = (distance/500)/rand(sharpness - prs.size_min, 0.1, sharpness + prs.size_max, 1);
console.log(distance);
let n = field;
const color = [
+prs["color_r_field_"+n],
+prs["color_g_field_"+n],
+prs["color_b_field_"+n]
];
const circ = new Stimul(size, color, direct);
const rect = new Bg(
[
prs["bgcolor1_r_field_"+n],
prs["bgcolor1_g_field_"+n],
prs["bgcolor1_b_field_"+n],
prs["bgcolor2_r_field_"+n],
prs["bgcolor2_g_field_"+n],
prs["bgcolor2_b_field_"+n],
prs["bgcolor3_r_field_"+n],
prs["bgcolor3_g_field_"+n],
prs["bgcolor3_b_field_"+n],
prs["bgcolor4_r_field_"+n],
prs["bgcolor4_g_field_"+n],
prs["bgcolor4_b_field_"+n]
],
+prs["cx_field_"+n],
+prs["cy_field_"+n]
);
// alert(prs[1][0]+" "+prs[1][1]+" "+prs[1][2]);
stimul1 = circ;
bg1 = rect;
rect.create([$("#prepl"), test, $("#prepr")][n], prs["cx_field_"+n], prs["cy_field_"+n], ...rect.color);
circ.create([$("#prepl"), test, $("#prepr")][n]);
};
sideField = Math.floor(Math.random()*2)
draw([0,2][sideField]);
activ = false;
setTimeout(()=>{
stimul1.clear([$("#prepl"), $("#prepr")][sideField]);
bg1.clear([$("#prepl"), $("#prepr")][sideField]);
draw(1);
//for(let answer of document.querySelectorAll('.answer')){ answer.classList.add('inactive') };
counter++;
if (counter_circle<len) {
timer = setTimeout(() => {
//очищаю оба поля и перехожу к следующей итерации:
stimul1.clear(test);
bg1.clear(test);
activ = true;
//for(let answer of document.querySelectorAll('.answer')){answer.classList.remove('inactive')};
timerClear = setTimeout(() => {
show(parameters);
}, 1000)
//show(parameters);
}, t);
}
}, rand(prs.time_min, 0, prs.time_max, Infinity));
//rect2.create(test);
//------------конец отрисовки стимула---------------------//
if (counter_circle == len) {
//save();
//---------здесь надо сделать кнопки неактивными---------//
}
}
function save() {
localStorage.wins = wins;
localStorage.time_res = time_res;
// alert(localStorage.wins);
/*$.ajax({
url: 'back.php',
type: 'POST',
dataType: "json",
//: "jsonData="+JSON.stringify(localStorage.results)
data: "jsonData=" + JSON.stringify(
{wins:localStorage.wins,
time_res:localStorage.time_res
}
),
success: function(res) {
//alert(res.a+"-"+res.b+ "-"+res.c);
alert(res);
}
}); */
}
//show()
//$("#start").click(function (){show(); this.style.display="none"});
/*$.ajax({ url: "rings.csv", type: 'GET',success: function(res){alert(res);//const params=res.split("
").map(row=>row.split(","))},error: function(){alert("не удалось считать данные из таблицы.")},});*/
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Raw
style.css
body {
text-align: center;
}
#area {
display: flex;
justify-content:center;
background-color:white;
}
#area div {
min-height: 300px;
box-shadow:none;
}
#prepl,
#prepr {
width: 20%;
flex-shrink: 0;
display:flex;
flex-direction:column;
justify-content:flex-start;
align-items:center;
}
#test {
width: 60%;
flex-grow: 3;
flex-shrink: 0;
}
svg {
border: thin dotted silver;
}
#alert {
height: 1em;
padding: 0.7em;
border: thin solid silver;
text-align: center;
}
button, input{
border: thin solid gray;
padding: 1em 2em;
}
button {
background-color:#eff5fb;
color:#444477;
}
p {
text-align: justify;
padding: 3em;
}
#area button {
width: 90%;
}
#infoblock{
display:flex;
justify-content:space-around;
align-items:center;
}
#infoblock p{
width:30%;
flex-shrink:0;
height:1em;
padding:0.7em;
border:thin solid #880000
}
a{
color:#444477;
text-decoration:none;
}
@media (max-device-width:800px){
button{
font-size:1.4em;
}
.answer{
min-height: 60%;
flex-grow:2;
font-size:1.9em;
}
#start{
width:70%;
}
input{
padding:2em;
border-radius:0.5em;
}
input{
border:4px solid #eff5fb;
}
svg{
border:3px solid #444477
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment