 
			
				12.10.2018, 04:25
			
			
			
		  
	 | 
 
	
		
		
		
			
			| 
			
				
				
				 Новичок на форуме 
				
				
				
				
	
 
 
 
			 | 
			  | 
			
				
				
					Регистрация: 12.10.2018 
					
					
					
						Сообщений: 7
					 
					
					
			
		
 
		 
		
			 | 
		 
		 
		
	 | 
 
	| 
	
	
		
		
			
			 
				Функция подсчета конкретных классов
			 
			
		
		
		
		Подскажите, пожалуйста, как можно правильно реализовать функцию подсчета конкретных "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>
 
		
	
		
		
		
		
		
		
	
		
			
			
	
			
			
			
			
			
				 
			
			
			
			
			
			
				
			
			
			
		 
		
	
	
	 | 
 
 
	 
		 | 
 
 
	
	
	
		
	
		
		
		
			
			 
			
				12.10.2018, 08:25
			
			
			
		  
	 | 
 
	
		
		
		
			  | 
			
			
				
				
				 Профессор 
				
				
				
				
	
 
 
 
			 | 
			  | 
			
				
				
					Регистрация: 27.05.2010 
					
					
					
						Сообщений: 33,150
					 
					
					
			
		
 
		 
		
			 | 
		 
		 
		
	 | 
 
	
	
	
		
		
		
		
		
	
 
	| 
		
			Сообщение от Rachik
			
		
	 | 
 
	| 
		Подскажите, пожалуйста, как можно правильно реализовать функцию подсчета конкретных "graph" и вывести их сумм в разные графы ?
	 | 
 
	
 
 можно перевод? или результат или алгоритм расчёта?  
		
	
		
		
		
		
		
		
	
		
		
	
	
	 | 
 
 
	 
		 | 
 
 
	
	
	
		
	
		
		
		
			
			 
			
				12.10.2018, 13:13
			
			
			
		  
	 | 
 
	
		
		
		
			
			| 
			
				
				
				 Новичок на форуме 
				
				
				
				
	
 
 
 
			 | 
			  | 
			
				
				
					Регистрация: 12.10.2018 
					
					
					
						Сообщений: 7
					 
					
					
			
		
 
		 
		
			 | 
		 
		 
		
	 | 
 
	| 
	
	
		
		
		
		
		 Мне нужно сделать так, чтобы value конкретных вопросов складывалось и выводилось в отдельную графу, мне подсказали, что необходимо добавить в содержимое вопросов  свойство "graph: 1," , а потом в функции подсчета собрать массив сумм с индексом по графам, но я не смог найти информации как работать со свойством graph 
		
	
		
		
		
		
		
		
	
		
		
	
	
	 | 
 
 
	 
		 | 
 
 
	
	
	
		
	
		
		
		
			
			 
			
				12.10.2018, 13:38
			
			
			
		  
	 | 
 
	
		
		
		
			  | 
			
			
				
				
				 Профессор 
				
				
				
				
	
 
 
 
			 | 
			  | 
			
				
				
					Регистрация: 08.11.2017 
					
					
					
						Сообщений: 641
					 
					
					
			
		
 
		 
		
			 | 
		 
		 
		
	 | 
 
	| 
	
	
		
		
		
		
		 вот есть у тебя массив qs в нем 4 объекта, 
 
первый два объекта имеют graph:1 
вторые два объекта имеют graph:2 
 
например для первых двух вопросов выбрали value:2 
для вторых двух вопрос выбрали value:-2 
 
после calc нужно знать что graph:1 имеет сумму 4 
а graph:2 имеет сумму -4 
 
так ты хочешь?) 
		
	
		
		
		
		
		
		
	
		
		
	
	
	 | 
 
 
	 
		 | 
 
 
	
	
	
		
	
		
		
		
			
			 
			
				12.10.2018, 14:03
			
			
			
		  
	 | 
 
	
		
		
		
			
			| 
			
				
				
				 Новичок на форуме 
				
				
				
				
	
 
 
 
			 | 
			  | 
			
				
				
					Регистрация: 12.10.2018 
					
					
					
						Сообщений: 7
					 
					
					
			
		
 
		 
		
			 | 
		 
		 
		
	 | 
 
	
	
	
		
		
		
		
		
	
 
	
		
			Сообщение от SuperZen
			 
		
	 | 
 
	
		вот есть у тебя массив qs в нем 4 объекта, 
 
первый два объекта имеют graph:1 
вторые два объекта имеют graph:2 
 
например для первых двух вопросов выбрали value:2 
для вторых двух вопрос выбрали value:-2 
 
после calc нужно знать что graph:1 имеет сумму 4 
а graph:2 имеет сумму -4 
 
так ты хочешь?)
	 | 
 
	
 
 Да, но значения привязаны к checkbox и необходимо складывать значения активных checkbox (получается, что у нас в graph 1 входит два вопроса и когда выбираешь, например, в первом вопросе checkbox с value 2 и во втором вопросе checkbox с value -1 выводит ответ в графу №1, а третий вопрос с выбранным checkbox с value 1 и в четвертом вопросе выбранный checkbox с value 2 сумма их в графу №2) мне бы хотябы пример, чтобы подстроить. В полном коде 174 вопроса, надо разделить их на 29 граф и для каждой графы подсчитать сумму 6 вопросов входящих в определенную групп.  
		
	
		
		
		
		
		
		
	
		
		
	
	
	 | 
 
 
	 
		 | 
 
 
	
	
	
		
	
		
		
		
			
			 
			
				12.10.2018, 14:19
			
			
			
		  
	 | 
 
	
		
		
		
			  | 
			
			
				
				
				 Профессор 
				
				
				
				
	
 
 
 
			 | 
			  | 
			
				
				
					Регистрация: 08.11.2017 
					
					
					
						Сообщений: 641
					 
					
					
			
		
 
		 
		
			 | 
		 
		 
		
	 | 
 
	
	
	
		
		
		
		
		Не проверял, но идея примерно такая,) 
/* 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 + '%';
    }
 
		
	
		
		
		
		
		
		
		
						  
				
				Последний раз редактировалось SuperZen, 12.10.2018 в 14:21.
				
				
			
		
		
	
		
		
	
	
	 | 
 
 
	 
		 | 
 
 
	
	
	
		
	
		
		
		
			
			 
			
				12.10.2018, 14:39
			
			
			
		  
	 | 
 
	
		
		
		
			  | 
			
			
				
				
				 Профессор 
				
				
				
				
	
 
 
 
			 | 
			  | 
			
				
				
					Регистрация: 27.05.2010 
					
					
					
						Сообщений: 33,150
					 
					
					
			
		
 
		 
		
			 | 
		 
		 
		
	 | 
 
	
	
	
		
		
		
		
		  
Пример: сумма выбранных  инпутов каждого 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>
 
		
	
		
		
		
		
		
		
		
						  
				
				Последний раз редактировалось рони, 12.10.2018 в 23:40.
				
				
			
		
		
	
		
		
	
	
	 | 
 
 
	 
		 | 
 
 
	
	
	
		
	
		
		
		
			
			 
			
				12.10.2018, 14:45
			
			
			
		  
	 | 
 
	
		
		
		
			  | 
			
			
				
				
				 Профессор 
				
				
				
				
	
 
 
 
			 | 
			  | 
			
				
				
					Регистрация: 08.11.2017 
					
					
					
						Сообщений: 641
					 
					
					
			
		
 
		 
		
			 | 
		 
		 
		
	 | 
 
	| 
	
	
		
		
		
		
		 рони, еще надо сумму поделить на кол-во выбранных checkbox... 
		
	
		
		
		
		
		
		
	
		
		
	
	
	 | 
 
 
	 
		 | 
 
 
	
	
	
		
	
		
		
		
			
			 
			
				12.10.2018, 14:49
			
			
			
		  
	 | 
 
	
		
		
		
			
			| 
			
				
				
				 Новичок на форуме 
				
				
				
				
	
 
 
 
			 | 
			  | 
			
				
				
					Регистрация: 12.10.2018 
					
					
					
						Сообщений: 7
					 
					
					
			
		
 
		 
		
			 | 
		 
		 
		
	 | 
 
	
	
	
		
		
		
		
		
	
 
	
		
			Сообщение от рони
			 
		
	 | 
 
	
		   
Пример: сумма выбранных  инпутов каждого 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');
        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', '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() {
        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>
	 | 
 
	
 
 Спасибо большое, вроде работает так как надо, пойду попробую теперь в полный код это подстроить  
		
	
		
		
		
		
		
		
	
		
			
			
	
			
			
			
			
			
				 
			
			
			
			
			
			
				
			
			
			
		 
		
	
	
	 | 
 
 
	 
		 | 
 
 
	
	
	
		
	
		
		
		
			
			 
			
				12.10.2018, 14:50
			
			
			
		  
	 | 
 
	
		
		
		
			
			| 
			
				
				
				 Профессор 
				
				
				
				
	
 
 
 
			 | 
			  | 
			
				
				
					Регистрация: 27.11.2015 
					
					
					
						Сообщений: 2,899
					 
					
					
			
		
 
		 
		
			 | 
		 
		 
		
	 | 
 
	
	
	
		
		
		
		
		
	
 
	| 
		
			Сообщение от SuperZen
			
		
	 | 
 
	| 
		надо сумму поделить на кол-во выбранных checkbox
	 | 
 
	
 
 Это зачем? В ТЗ у ТС -нужны суммы по графам
 
	
 
	| 
		
			Сообщение от Rachik
			
		
	 | 
 
	| 
		необходимо складывать значения активных checkbox
	 | 
 
	
 
  
		
	
		
		
		
		
		
		
	
		
		
	
	
	 | 
 
 
	 
		 | 
 
 
 
 |  
  |