Skip to content

Instantly share code, notes, and snippets.

@Boris-creator

Boris-creator/index.html

Created July 17, 2020 21:59
Show Gist options
  • Save Boris-creator/7731ad25a40dda5a32295f6b5f29cf56 to your computer and use it in GitHub Desktop.
Save Boris-creator/7731ad25a40dda5a32295f6b5f29cf56 to your computer and use it in GitHub Desktop.
Download ZIP
KKVBBEw
Raw
index.html
<fieldset id="central" style="display:none">
<fieldset class="fields">Поле: <input name="field"><br>
<span>Цвет стимула:</span><br>
r:
<select name="color_r">
<option value="">Выберите</option>
<option value="0">0</option>
<option value="32">32</option>
<option value="64">64</option>
<option value="96">96</option>
<option value="128">128</option>
<option value="160">160</option>
<option value="192">192</option>
<option value="224">224</option>
<option value="255">255</option>
</select>
g: <select name="color_g">
<option value="">Выберите</option>
<option value="0">0</option>
<option value="32">32</option>
<option value="64">64</option>
<option value="96">96</option>
<option value="128">128</option>
<option value="160">160</option>
<option value="192">192</option>
<option value="224">224</option>
<option value="255">255</option>
</select> b: <select name="color_b">
<option value="">Выберите</option>
<option value="0">0</option>
<option value="32">32</option>
<option value="64">64</option>
<option value="96">96</option>
<option value="128">128</option>
<option value="160">160</option>
<option value="192">192</option>
<option value="224">224</option>
<option value="255">255</option>
</select><br>
<span>Цвет фона:</span><br>
1 квадрант: r: <select class="q1" name="bgcolor1_r">
<option value="">Выберите</option>
<option value="0">0</option>
<option value="32">32</option>
<option value="64">64</option>
<option value="96">96</option>
<option value="128">128</option>
<option value="160">160</option>
<option value="192">192</option>
<option value="224">224</option>
<option value="255">255</option>
</select> g: <select class="q1" name="bgcolor1_g">
<option value="">Выберите</option>
<option value="0">0</option>
<option value="32">32</option>
<option value="64">64</option>
<option value="96">96</option>
<option value="128">128</option>
<option value="160">160</option>
<option value="192">192</option>
<option value="224">224</option>
<option value="255">255</option>
</select> b: <select class="q1" name="bgcolor1_b">
<option value="">Выберите</option>
<option value="0">0</option>
<option value="32">32</option>
<option value="64">64</option>
<option value="96">96</option>
<option value="128">128</option>
<option value="160">160</option>
<option value="192">192</option>
<option value="224">224</option>
<option value="255">255</option>
</select><br>
2 квадрант:
r: <select class="q2" name="bgcolor2_r">
<option value="">Выберите</option>
<option value="0">0</option>
<option value="32">32</option>
<option value="64">64</option>
<option value="96">96</option>
<option value="128">128</option>
<option value="160">160</option>
<option value="192">192</option>
<option value="224">224</option>
<option value="255">255</option>
</select> g: <select class="q2" name="bgcolor2_g">
<option value="">Выберите</option>
<option value="0">0</option>
<option value="32">32</option>
<option value="64">64</option>
<option value="96">96</option>
<option value="128">128</option>
<option value="160">160</option>
<option value="192">192</option>
<option value="224">224</option>
<option value="255">255</option>
</select> b: <select class="q2" name="bgcolor2_b">
<option value="">Выберите</option>
<option value="0">0</option>
<option value="32">32</option>
<option value="64">64</option>
<option value="96">96</option>
<option value="128">128</option>
<option value="160">160</option>
<option value="192">192</option>
<option value="224">224</option>
<option value="255">255</option>
</select><br>
3 квадрант:
r: <select class="q3" name="bgcolor3_r">
<option value="">Выберите</option>
<option value="0">0</option>
<option value="32">32</option>
<option value="64">64</option>
<option value="96">96</option>
<option value="128">128</option>
<option value="160">160</option>
<option value="192">192</option>
<option value="224">224</option>
<option value="255">255</option>
</select> g: <select class="q3" name="bgcolor3_g">
<option value="">Выберите</option>
<option value="0">0</option>
<option value="32">32</option>
<option value="64">64</option>
<option value="96">96</option>
<option value="128">128</option>
<option value="160">160</option>
<option value="192">192</option>
<option value="224">224</option>
<option value="255">255</option>
</select> b: <select class="q3" name="bgcolor3_b">
<option value="">Выберите</option>
<option value="0">0</option>
<option value="32">32</option>
<option value="64">64</option>
<option value="96">96</option>
<option value="128">128</option>
<option value="160">160</option>
<option value="192">192</option>
<option value="224">224</option>
<option value="255">255</option>
</select><br>
4 квадрант:
r: <select class="q4" name="bgcolor4_r">
<option value="">Выберите</option>
<option value="0">0</option>
<option value="32">32</option>
<option value="64">64</option>
<option value="96">96</option>
<option value="128">128</option>
<option value="160">160</option>
<option value="192">192</option>
<option value="224">224</option>
<option value="255">255</option>
</select> g: <select class="q4" name="bgcolor4_g">
<option value="">Выберите</option>
<option value="0">0</option>
<option value="32">32</option>
<option value="64">64</option>
<option value="96">96</option>
<option value="128">128</option>
<option value="160">160</option>
<option value="192">192</option>
<option value="224">224</option>
<option value="255">255</option>
</select> b: <select class="q4" name="bgcolor4_b">
<option value="">Выберите</option>
<option value="0">0</option>
<option value="32">32</option>
<option value="64">64</option>
<option value="96">96</option>
<option value="128">128</option>
<option value="160">160</option>
<option value="192">192</option>
<option value="224">224</option>
<option value="255">255</option>
</select></fieldset>
</fieldset>
<!-- ----------------------------------------------------- -->
Введите общее число полей: <input type="number" id="num_fields">
<hr>
<form id="compare">
имя цикла: <input type="text"><br>
Цикл требует ответов?
<input type="checkbox" name="type"><br>
<fieldset>
<span>Диапазон изменения размера стимула в зависимости от остроты:</span><br>
от <select name="size_min">
<option value="0">0</option>
<option value="0.1">0.1</option>
<option value="0.2">0.2</option>
<option value="0.3">0.3</option>
<option value="0.4">0.4</option>
<option value="0.5">0.5</option>
<option value="0.6">0.7</option>
<option value="0.8">0.8</option>
<option value="0.9">0.9</option>
<option value="1">1.0</option>
</select>
до <select name="size_max">
<option value="0">0</option>
<option value="0.1">0.1</option>
<option value="0.2">0.2</option>
<option value="0.3">0.3</option>
<option value="0.4">0.4</option>
<option value="0.5">0.5</option>
<option value="0.6">0.7</option>
<option value="0.8">0.8</option>
<option value="0.9">0.9</option>
<option value="1">1.0</option>
</select>
</fieldset>
<fieldset>
<span>Диапазон изменения времени показа:</span><br>
от <select name="time_min">
<option value="">Выберите</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="75">75</option>
<option value="100">100</option>
<option value="125">125</option>
<option value="150">150</option>
<option value="175">175</option>
<option value="200">200</option>
<option value="225">225</option>
<option value="250">250</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="1500">1500</option>
<option value="2000">2000</option>
<option value="2500">2500</option>
<option value="3000">3000</option>
<option value="3500">3500</option>
<option value="4000">4000</option>
<option value="4500">4500</option>
<option value="5000">5000</option>
</select> до
<select name="time_max">
<option value="">Выберите</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="75">75</option>
<option value="100">100</option>
<option value="125">125</option>
<option value="150">150</option>
<option value="175">175</option>
<option value="200">200</option>
<option value="225">225</option>
<option value="250">250</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="1500">1500</option>
<option value="2000">2000</option>
<option value="2500">2500</option>
<option value="3000">3000</option>
<option value="3500">3500</option>
<option value="4000">4000</option>
<option value="4500">4500</option>
<option value="5000">5000</option>
</select>
</fieldset>
<fieldset id="colors">
</fieldset>
<button>Создать</button>
</form>
<ol id="templates"></ol>
Raw
script.js
const form = document.getElementById("compare");
const fields = [...form.querySelectorAll("select")].concat([
...form.querySelectorAll("input")
]);
form.addEventListener("input", (e) => {
const sel = e.target.closest("select"),
inp = e.target.closest("input");
const field = sel == undefined ? inp : sel;
if (!field) {
return;
}
field.classList.remove("empty");
});
function validate(form, e) {
let empty = false;
const fields = [...form.querySelectorAll("select")].concat([
...form.querySelectorAll("input")
]);
for (let field of fields) {
if (field.value == "") {
field.classList.add("empty");
empty = true;
}
}
if (empty) {
e.preventDefault();
return false;
}
}
form.querySelector("button").addEventListener("click", (e) => {
validate(form, e);
});
/*---------------------------------------------------------------*/
const colors = document.getElementById("colors"),
num = document.getElementById("num_fields");
function construct(n) {
const fieldset =document.getElementById("central").innerHTML +
"</fieldset>";
//console.log(fieldset)
colors.innerHTML = fieldset;
for (let i = 0; i < n - 1; i++) {
colors.insertAdjacentHTML("beforeend", fieldset);
};
for(let f of document.getElementsByClassName('fields')){
for(let s of f.querySelectorAll("input, select")){
s.name+="_field"+[...f.querySelectorAll("input, select")].indexOf(s)
}
}
}
construct(0);
num.addEventListener("input", () => {
num.classList.remove("empty");
const n = +num.value;
if (!Number.isInteger(n) || n < 1) {
num.classList.add("empty");
return;
}
construct(+num.value);
});
document.body.addEventListener("input", (e) => {
if (!e.target.closest(".q1")) {
return;
}
const q = e.target.closest(".q1"),
f = e.target.closest("fieldset"),
q1s = [...f.querySelectorAll(".q1")],
q2s = [...f.querySelectorAll(".q2")],
q3s = [...f.querySelectorAll(".q3")],
q4s = [...f.querySelectorAll(".q4")];
q2s[q1s.indexOf(q)].value = q3s[q1s.indexOf(q)].value = q4s[
q1s.indexOf(q)
].value = q.value;
});
//-------------------------------------------------------------------
const ol = document.querySelector("ol");
ol.addEventListener("click", function (e) {
if (!e.target.closest("li")) {
return;
}
const li = e.target.closest("li");
window.getSelection().removeAllRanges();
const range = new Range();
range.selectNodeContents(li);
window.getSelection().addRange(range);
});
function create(e) {
const circleform = e.target.closest("form");
const data = [...circleform.querySelectorAll("select, input")].map((input) =>
input.name+":"+(input.type == "checkbox"
? ["нет", "да"][+input.checked]
: input.type == "number"
? +input.value
: input.value)
)
;
circleform.screenplay.value = data.join("|");
//alert(circleform.screenplay.value);
console.log(data.join("|"))
document
.querySelector("#templates")
.insertAdjacentHTML(
"beforeend",
"<li><span>" +
/*circleform.dataset.type+" | "+*/ data.join("|") +
"</span><button>редактировать</button></li>"
);
}
document.querySelector("#templates").addEventListener("click", (e) => {
if (!e.target.closest("button")) {
return;
}
const str = e.target.closest("button").parentNode.querySelector("span")
.textContent;
update(
e.target.closest("button").parentNode.querySelector("span").textContent
);
});
function update(str) {
const data = str.split("|");
console.log(data[0]);
const fields = [...form.querySelectorAll("input, select")];
data.slice(1).forEach((v, i) => {
fields[i].value = v;
});
if (data.includes("да")) {
form.querySelector('input[type="checkbox"]').click();
}
//alert(data)
}
for (let cf of [form]) {
cf.addEventListener("click", (e) => {
if (!e.target.closest("button")) {
return;
}
//e.preventDefault();
create(e);
});
}
for (let form of [...document.getElementsByTagName("form")].filter(
(f) => f.id !== "series"
)) {
// form.method = "POST";
//form.action = "redactor_back1.php";
/*for (let input of form.querySelectorAll("input")) {
input.name = "somename";
}*/
const input = document.createElement("input");
input.type = "hidden";
input.name = "screenplay";
form.append(input);
}
Raw
style.css
body {
margin: 0;
width: 100%;
height: 100vh;
text-align: center;
padding: 5em 2em 15em 2em;
}
form,
ol {
width: 80%;
margin: 2em auto;
box-shadow: 1em 1em 5em #ddddcc;
background-color: #eeeede;
padding: 4%;
}
#series input {
display: block;
width: 80%;
height: 1.6em;
margin: 0.5em auto;
border-radius: 0;
background-color: white;
}
ol li {
border: 1px solid white;
padding: 0.2em;
overflow-x: scroll;
}
ol li button {
border: 1px solid silver;
}
form button {
display: block;
margin: 2em auto;
}
fieldset input {
width: 4em;
}
body {
counter-reset: section; /* Устанавливает значение
счетчика, равным 0 */
}
#series span::before {
counter-increment: section;
content: "Цикл " counter(section) ": ";
}
#circle {
text-align: right;
width: 50%;
margin: 2em auto;
}
ol li {
cursor: pointer;
}
a {
text-decoration: none;
font-size: 1.7em;
}
.target {
background-color: silver;
}
.invisible {
visibility: hidden;
}
.empty{
border:2px solid red
}
/*select {
display: block;
margin: 2em auto;
}
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment