Skip to content

Instantly share code, notes, and snippets.

@Boris-creator

Boris-creator/index.html

Created July 20, 2020 11:19
Show Gist options
  • Save Boris-creator/43aa6980335bef4c095cae7c1358eaa2 to your computer and use it in GitHub Desktop.
Save Boris-creator/43aa6980335bef4c095cae7c1358eaa2 to your computer and use it in GitHub Desktop.
Download ZIP
LYGXydM
Raw
index.html
<div style='width:20%; margin-left:80%; min-height:3em; border:thin solid black; background-color:#7777aa; color:white;'>
<span id='timer'>
</span>
<!--<br>
<button style='border:1px solid white;' onclick=''></button>-->
</div>
<input id="distance" placeholder="Расстояние в см">
<button id="subm">
подтвердить
</button>
<div id="infoblock">
<p id="countSeries">
Номер текущей серии
</p>
<p id="alert">
Подсказка
</p>
</div>
<p id="randoms" style="width:80%; border:thin solid black; color:red; margin:1em auto">
</p>
<div id="area">
<div id="prepl">
<svg class="answer" data-dir="0" viewBox="0 0 744.09448819 744.3622047" preserveAspectRatio="xMinYMin meet">
<g class="stimul" transform="translate(896.29154,31.74396)">
<path class="stimul" style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.99351662px; stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" 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 " transform="translate(-524.244295905 355.43714235) scale(1.7) translate(524.244295905 -355.43714235) rotate(0 -524.244295905 355.43714235)" />
</g>
</svg>
<svg class="answer" data-dir="90" viewBox="0 0 744.09448819 744.3622047" preserveAspectRatio="xMinYMin meet">
<g class="stimul" transform="translate(896.29154,31.74396)">
<path class="stimul" style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.99351662px; stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" 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 " transform="translate(-524.244295905 355.43714235) scale(1.7) translate(524.244295905 -355.43714235) rotate(90 -524.244295905 355.43714235)" />
</g>
</svg>
</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 class="answer" data-dir="180" viewBox="0 0 744.09448819 744.3622047" preserveAspectRatio="xMinYMin meet">
<g>
<rect class="background" x="0" y="0" width="744.09448819" height="744.3622047" fill="transparent" />
</g>
<g class="stimul" transform="translate(896.29154,31.74396)">
<path class="stimul" style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.99351662px; stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" 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 " transform="translate(-524.244295905 355.43714235) scale(1.7) translate(524.244295905 -355.43714235) rotate(180 -524.244295905 355.43714235)" />
</g>
</svg>
<svg class="answer" data-dir="270" viewBox="0 0 744.09448819 744.3622047" preserveAspectRatio="xMinYMin meet">
<g class="stimul" transform="translate(896.29154,31.74396)">
<path class="stimul" style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.99351662px; stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" 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 " transform="translate(-524.244295905 355.43714235) scale(1.7) translate(524.244295905 -355.43714235) rotate(270 -524.244295905 355.43714235)" />
</g>
</svg>
</div>
</div>
<div>
<input id="arrows">
</div>
<button id="start">
Старт
</button>
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":"define","name":"Circle2","type":"нет","size_min":"0","size_max":"0","time_min":"1000","time_max":"1500","pos_field_0":"C","cx_field_0":-200,"cy_field_0":-300,"color_r_field_0":"255","color_g_field_0":"0","color_b_field_0":"0","bgcolor1_r_field_0":"255","bgcolor1_g_field_0":"32","bgcolor1_b_field_0":"0","bgcolor2_r_field_0":"0","bgcolor2_g_field_0":"224","bgcolor2_b_field_0":"0","bgcolor3_r_field_0":"64","bgcolor3_g_field_0":"32","bgcolor3_b_field_0":"32","bgcolor4_r_field_0":"255","bgcolor4_g_field_0":"160","bgcolor4_b_field_0":"32"}
{"task":"define","name":"Circle1","type":"нет","size_min":"0","size_max":"0","time_min":"1500","time_max":"2000","pos_field_0":"C","cx_field_0":100,"cy_field_0":200,"color_r_field_0":"255","color_g_field_0":"0","color_b_field_0":"0","bgcolor1_r_field_0":"192","bgcolor1_g_field_0":"224","bgcolor1_b_field_0":"0","bgcolor2_r_field_0":"32","bgcolor2_g_field_0":"160","bgcolor2_b_field_0":"0","bgcolor3_r_field_0":"0","bgcolor3_g_field_0":"255","bgcolor3_b_field_0":"32","bgcolor4_r_field_0":"0","bgcolor4_g_field_0":"255","bgcolor4_b_field_0":"0"}`.split(/\s/g).map(c=>JSON.parse(c)).filter(c=>c.task=="define");
console.log(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;
changing_func(0);
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.html("Ошибка!");
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 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 stimul, stimul2, bg, 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", "transparent")
}
}
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};
//--------------- На время показа делаю кнопки неактивными: --------------
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);
const direct = random(dirs_desk, lastDir);
lastDir = direct;
const size = 1/rand(sharpness - prs.size_min, 0.1, sharpness + prs.size_max, 1)
const color = [
+prs.color_r_field_0,
+prs.color_g_field_0,
+prs.color_b_field_0];
const circ = new Stimul(
size, color, direct
);
const rect = new Bg([prs.bgcolor1_r_field_0, prs.bgcolor1_g_field_0, prs.bgcolor1_b_field_0, prs.bgcolor2_r_field_0, prs.bgcolor2_g_field_0, prs.bgcolor2_b_field_0, prs.bgcolor3_r_field_0, prs.bgcolor3_g_field_0, prs.bgcolor3_b_field_0, prs.bgcolor4_r_field_0, prs.bgcolor4_g_field_0, prs.bgcolor4_b_field_0], +(prs.cx_field_0), +(prs.cy_field_0));
// alert(prs[1][0]+" "+prs[1][1]+" "+prs[1][2]);
stimul = circ;
bg = rect;
rect.create(test, prs.cx_field_0, prs.cy_field_0, ...rect.color);
circ.create(test);
activ = false;
//for(let answer of document.querySelectorAll('.answer')){ answer.classList.add('inactive') };
counter++;
if(counterS<len/4){timer = setTimeout(()=>{ //очищаю оба поля и перехожу к следующей итерации:
stimul.clear(test);
bg.clear(test);
activ = true;
//for(let answer of document.querySelectorAll('.answer')){answer.classList.remove('inactive')};
timerClear = setTimeout(()=>{
show(parameters)
}, rand(prs.time_min, 0, prs.time_max, Infinity))
//show(parameters);
}, t)}
//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;*/
}
#prepl,
#prepr {
width: 20%;
flex-shrink: 0;
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:center;
}
#prepl svg, #prepr svg{
cursor:pointer
}
#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
}
#arrows{
border:thin dashed silver;
margin: 1em auto;
display:none;
}
a{
color:#444477;
text-decoration:none;
}
#tester{
display:flex;
flex-direction:column;
width:40%;
margin: auto;
padding:2em;
border:2px solid #444488;
}
#tester input, #tester select{
display:block;
width:80%;
}
fieldset input{
display:inline-block;
}
#tester button{
width:40%;
}
@media (max-device-width:800px){
#area div{
}
button{
font-size:1.4em;
}
.answer{
min-height: 60%;
flex-grow:2;
font-size:1.9em;
}
#start{
width:70%;
}
button, input{
padding:2em;
border-radius:0.5em;
}
input{
border:4px solid #eff5fb;
}
svg{
/*border:3px solid #444477*/
}
#arrows{
display:none;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment