Функция подсчета конкретных классов
Подскажите, пожалуйста, как можно правильно реализовать функцию подсчета конкретных "graph" и вывести их сумм в разные графы ?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Карта интересов</title>
<style>
h1, h2, {
text-align: center;
font-family: sans-serif;
}
ul.list_quest, div.result {
padding: 0;
margin: 0 auto;
width: 100%;
max-width: 1200px;
border-bottom: 1px solid #eee;
display: flex;
font-family: sans-serif;
}
ul.list_quest:nth-child(odd) {
background: #f7f7f7;
}
.list_quest li, div.result > div {
padding: 12px;
margin: 0;
list-style: none;
flex-basis: 25%;
width: 25%;
align-self: auto;
}
ul.list_quest:nth-child(odd) {
background: #f7f7f7;
}
.list_quest li, div.result > div {
padding: 12px;
margin: 0;
list-style: none;
flex-basis: 25%;
width: 25%;
align-self: auto;
}
li.quest {
font-weight: bold;
}
li.answer label {
display: flex;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
li.answer label:hover {
background: #dff;
box-shadow: 0 0 2px aqua;
}
div.text_box {
margin-left: 4px;
}
li.answer {
border-left: 1px solid #eee;
}
button {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
user-select: none;
border: 1px solid #ccc;
border-radius: 4px;
color: #333;
background-color: #fff;
outline: 0;
}
button:hover {
background-color: #e6e6e6;
border-color: #adadad;
outline: 0;
}
button:active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
div.clear_btn {
flex-basis: 80% !important;
width: 75%;
padding-right: 14px;
}
div#result {
font-size: 30px;
font-weight: bold;
text-align: center;
}
</style>
<body>
<header>
<h1 align="center">"КАРТА ИНТЕРЕСОВ" А.Е. Голомшток</h1>
</header>
<h2>
<p align="left"><em>Инструкция:</em> для определения ведущих интересов Вам предлагается перечень вопросов.<br>
Если Вам очень нравится то, о чем спрашивается в вопросе, в бланке ответов рядом с его номером поставьте два плюса "++", <br>
если просто нравится - один плюс "+", <br>
если не знаете, сомневаетесь - ноль "0", если не нравится - один минус "-", <br>
а если очень не нравиться - два минуса "--".<br>
Отвечайте на вопросы, не пропуская ни одного из них. </p><br>
</h2>
<div id="questions"></div>
<div class="result">
<div class="clear_btn">
<button id="clear">Сбросить</button>
</div>
<div id="result"></div>
</div>
<h3 align="left">уровни выраженности:<br>
от -12 до -6 - высшая степень отрицания данного интереса;<br>
от -5 до -1 - интерес отрицается;<br>
от +1 до +4 - интерес выражен слабо;<br>
от +5 до +7 - выраженный интерес;<br>
от +8 до +12 - ярко выраженный интерес.</h3>
<script>
qs = [
{
query: 'Знакомиться с жизнью растений и животных.',
answer: [
{
value: 2,
text: 'очень нравится'
}, {
value: 1,
text: 'нравится'
},{
value: 0,
text: 'сомневаюсь'
}, {
value: -1,
text: 'не нравится'
}, {
value: -2,
text: 'совсем не нравится'
}
],
graph: 1,
},
{
query: 'Занятия и чтение книг по географии. ',
answer: [
{
value: 2,
text: 'очень нравится'
}, {
value: 1,
text: 'нравится'
},{
value: 0,
text: 'сомневаюсь'
}, {
value: -1,
text: 'не нравится'
}, {
value: -2,
text: 'совсем не нравится'
}
],
graph: 1,
},
{
query: 'Читать художественную или научно-папулярную литературу о геологических экспедициях.',
answer: [
{
value: 2,
text: 'очень нравится'
}, {
value: 1,
text: 'нравится'
},{
value: 0,
text: 'сомневаюсь'
}, {
value: -1,
text: 'не нравится'
}, {
value: -2,
text: 'совсем не нравится'
}
],
graph: 2,
},
{
query: 'Уроки и книги по анатомии и физиологии человека.',
answer: [
{
value: 2,
text: 'очень нравится'
}, {
value: 1,
text: 'нравится'
},{
value: 0,
text: 'сомневаюсь'
}, {
value: -1,
text: 'не нравится'
}, {
value: -2,
text: 'совсем не нравится'
}
],
graph: 2,
}
];
/* RENDER */
for (let i = 0; i < qs.length; i++) {
let q = qs[i];
let ul = document.createElement('ul');
ul.setAttribute('class', 'list_quest');
let li_q = document.createElement('li');
li_q.setAttribute('class', 'quest');
li_q.textContent = (i + 1) + '. ' + q.query + ':';
ul.appendChild(li_q);
for (let j = 0; j < q.answer.length; j++) {
let a = q.answer[j];
let li_a = document.createElement('li');
li_a.setAttribute('class', 'answer');
let ch = document.createElement('input');
ch.setAttribute('type', 'checkbox');
ch.value = a.value;
ch.onchange = ch.onclick = calc;
a.input = ch;
let lb = document.createElement('label');
let d_c = document.createElement('div');
d_c.setAttribute('class', 'ch_box');
d_c.appendChild(ch);
let d_t = document.createElement('div');
d_t.setAttribute('class', 'text_box');
d_t.textContent = a.text;
lb.appendChild(d_c);
lb.appendChild(d_t);
li_a.appendChild(lb);
ul.appendChild(li_a);
}
document.getElementById('questions').appendChild(ul);
}
document.getElementById('clear').onclick = reset;
calc();
/* CALCULATION */
function calc() {
let result = 0;
for (let i = 0; i < qs.length; i++) {
let q = qs[i];
let s = 0;
let c = 0;
for (let j = 0; j < q.answer.length; j++) {
let a = q.answer[j];
if (a.input.checked) {
c++;
s += a.input.value * 1;
console.log(i, j, c, s)
}
}
if (c > 0) result += s / c;
}
document.getElementById('result').textContent = result + '%';
}
/* RESET */
function reset() {
for (let i = 0; i < qs.length; i++) {
let q = qs[i];
for (let j = 0; j < q.answer.length; j++) {
let a = q.answer[j];
a.input.checked = false
}
}
calc();
}
</script>
</body>
</html>
|
Цитата:
|
Мне нужно сделать так, чтобы value конкретных вопросов складывалось и выводилось в отдельную графу, мне подсказали, что необходимо добавить в содержимое вопросов свойство "graph: 1," , а потом в функции подсчета собрать массив сумм с индексом по графам, но я не смог найти информации как работать со свойством graph
|
вот есть у тебя массив qs в нем 4 объекта,
первый два объекта имеют graph:1 вторые два объекта имеют graph:2 например для первых двух вопросов выбрали value:2 для вторых двух вопрос выбрали value:-2 после calc нужно знать что graph:1 имеет сумму 4 а graph:2 имеет сумму -4 так ты хочешь?) |
Цитата:
|
Не проверял, но идея примерно такая,)
/* CALCULATION */
function calc() {
let result = 0;
// здесь будем хранить результаты подсчетов для graph
let graphs = {
}
for (let i = 0; i < qs.length; i++) {
let q = qs[i];
let s = 0;
let c = 0;
for (let j = 0; j < q.answer.length; j++) {
let a = q.answer[j];
if (a.input.checked) {
// сохраним в graph какие-то вычисления
if (!graphs[q.graph]) {
graphs[q.graph] = {}
graphs[q.graph].value = parseInt(a.input.value)
graphs[q.graph].count = 1
} else {
graphs[q.graph].value += parseInt(a.input.value)
graphs[q.graph].count += 1
}
c++;
s += a.input.value * 1;
console.log(i, j, c, s)
}
}
if (c > 0) result += s / c;
// здесь объект graphs содержит сумму в value, и кол-во складываний в count для каждой graph
// Object.entries(graphs).forEach(([graphId, graph]) => {
// console.log(graphId, graph.value / graph.count)
// })
}
document.getElementById('result').textContent = result + '%';
}
|
:write:
Пример: сумма выбранных инпутов каждого graph
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Карта интересов</title>
<style>
h1, h2, {
text-align: center;
font-family: sans-serif;
}
ul.list_quest, div.result {
padding: 0;
margin: 0 auto;
width: 100%;
max-width: 1200px;
border-bottom: 1px solid #eee;
display: flex;
font-family: sans-serif;
}
ul.list_quest:nth-child(odd) {
background: #f7f7f7;
}
.list_quest li, div.result > div {
padding: 12px;
margin: 0;
list-style: none;
flex-basis: 25%;
width: 25%;
align-self: auto;
}
ul.list_quest:nth-child(odd) {
background: #f7f7f7;
}
.list_quest li, div.result > div {
padding: 12px;
margin: 0;
list-style: none;
flex-basis: 25%;
width: 25%;
align-self: auto;
}
li.quest {
font-weight: bold;
}
li.answer label {
display: flex;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
li.answer label:hover {
background: #dff;
box-shadow: 0 0 2px aqua;
}
div.text_box {
margin-left: 4px;
}
li.answer {
border-left: 1px solid #eee;
}
button {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
user-select: none;
border: 1px solid #ccc;
border-radius: 4px;
color: #333;
background-color: #fff;
outline: 0;
}
button:hover {
background-color: #e6e6e6;
border-color: #adadad;
outline: 0;
}
button:active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
div.clear_btn {
flex-basis: 80% !important;
width: 75%;
padding-right: 14px;
}
div#result {
font-size: 30px;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1 align="center">"КАРТА ИНТЕРЕСОВ" А.Е. Голомшток</h1>
</header>
<h2>
<p align="left"><em>Инструкция:</em> для определения ведущих интересов Вам предлагается перечень вопросов.<br>
Если Вам очень нравится то, о чем спрашивается в вопросе, в бланке ответов рядом с его номером поставьте два плюса "++", <br>
если просто нравится - один плюс "+", <br>
если не знаете, сомневаетесь - ноль "0", если не нравится - один минус "-", <br>
а если очень не нравиться - два минуса "--".<br>
Отвечайте на вопросы, не пропуская ни одного из них. </p><br>
</h2>
<div id="questions"></div>
<div class="result">
<div class="clear_btn">
<button id="clear">Сбросить</button>
</div>
<div id="result"></div>
</div>
<h3 align="left">уровни выраженности:<br>
от -12 до -6 - высшая степень отрицания данного интереса;<br>
от -5 до -1 - интерес отрицается;<br>
от +1 до +4 - интерес выражен слабо;<br>
от +5 до +7 - выраженный интерес;<br>
от +8 до +12 - ярко выраженный интерес.</h3>
<script>
qs = [
{
query: 'Знакомиться с жизнью растений и животных.',
answer: [
{
value: 2,
text: 'очень нравится'
}, {
value: 1,
text: 'нравится'
},{
value: 0,
text: 'сомневаюсь'
}, {
value: -1,
text: 'не нравится'
}, {
value: -2,
text: 'совсем не нравится'
}
],
graph: 1,
},
{
query: 'Занятия и чтение книг по географии. ',
answer: [
{
value: 2,
text: 'очень нравится'
}, {
value: 1,
text: 'нравится'
},{
value: 0,
text: 'сомневаюсь'
}, {
value: -1,
text: 'не нравится'
}, {
value: -2,
text: 'совсем не нравится'
}
],
graph: 1,
},
{
query: 'Читать художественную или научно-папулярную литературу о геологических экспедициях.',
answer: [
{
value: 2,
text: 'очень нравится'
}, {
value: 1,
text: 'нравится'
},{
value: 0,
text: 'сомневаюсь'
}, {
value: -1,
text: 'не нравится'
}, {
value: -2,
text: 'совсем не нравится'
}
],
graph: 2,
},
{
query: 'Уроки и книги по анатомии и физиологии человека.',
answer: [
{
value: 2,
text: 'очень нравится'
}, {
value: 1,
text: 'нравится'
},{
value: 0,
text: 'сомневаюсь'
}, {
value: -1,
text: 'не нравится'
}, {
value: -2,
text: 'совсем не нравится'
}
],
graph: 2,
}
];
/* RENDER */
for (let i = 0; i < qs.length; i++) {
let q = qs[i];
let ul = document.createElement('ul');
ul.setAttribute('class', 'list_quest');
ul.dataset.graph = q.graph;
ul.addEventListener("click", calc)
let li_q = document.createElement('li');
li_q.setAttribute('class', 'quest');
li_q.textContent = (i + 1) + '. ' + q.query + ':';
ul.appendChild(li_q);
for (let j = 0; j < q.answer.length; j++) {
let a = q.answer[j];
let li_a = document.createElement('li');
li_a.setAttribute('class', 'answer');
let ch = document.createElement('input');
ch.setAttribute('type', 'radio');
ch.name = "name"+i;
ch.value = a.value;
//ch.checked = !a.value;
a.input = ch;
let lb = document.createElement('label');
let d_c = document.createElement('div');
d_c.setAttribute('class', 'ch_box');
d_c.appendChild(ch);
let d_t = document.createElement('div');
d_t.setAttribute('class', 'text_box');
d_t.textContent = a.text;
lb.appendChild(d_c);
lb.appendChild(d_t);
li_a.appendChild(lb);
ul.appendChild(li_a);
}
document.getElementById('questions').appendChild(ul);
}
document.getElementById('clear').onclick = reset;
calc();
/* CALCULATION */
function calc() {
var uls = document.querySelectorAll('.list_quest');
var graph = {};
[].forEach.call(uls, function(ul) {
var num = ul.dataset.graph;
if(!graph[num]) graph[num] = 0 ;
var inp = ul.querySelectorAll(':checked');
[].forEach.call(inp, function(i) {
graph[num] += +i.value
})
});
document.getElementById('result').textContent = JSON.stringify(graph, null, 4);
}
/* RESET */
function reset() {
for (let i = 0; i < qs.length; i++) {
let q = qs[i];
for (let j = 0; j < q.answer.length; j++) {
let a = q.answer[j];
a.input.checked = false
}
}
calc();
}
</script>
</body>
</html>
|
рони, еще надо сумму поделить на кол-во выбранных checkbox...
|
Цитата:
|
Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 12:24. |