Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.10.2018, 04:25
Новичок на форуме
Отправить личное сообщение для Rachik Посмотреть профиль Найти все сообщения от Rachik
 
Регистрация: 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>&nbspдля определения ведущих интересов Вам предлагается перечень вопросов.<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>
Ответить с цитированием
  #2 (permalink)  
Старый 12.10.2018, 08:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Сообщение от Rachik
Подскажите, пожалуйста, как можно правильно реализовать функцию подсчета конкретных "graph" и вывести их сумм в разные графы ?
можно перевод? или результат или алгоритм расчёта?
Ответить с цитированием
  #3 (permalink)  
Старый 12.10.2018, 13:13
Новичок на форуме
Отправить личное сообщение для Rachik Посмотреть профиль Найти все сообщения от Rachik
 
Регистрация: 12.10.2018
Сообщений: 7

Мне нужно сделать так, чтобы value конкретных вопросов складывалось и выводилось в отдельную графу, мне подсказали, что необходимо добавить в содержимое вопросов свойство "graph: 1," , а потом в функции подсчета собрать массив сумм с индексом по графам, но я не смог найти информации как работать со свойством graph
Ответить с цитированием
  #4 (permalink)  
Старый 12.10.2018, 13:38
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

вот есть у тебя массив qs в нем 4 объекта,

первый два объекта имеют graph:1
вторые два объекта имеют graph:2

например для первых двух вопросов выбрали value:2
для вторых двух вопрос выбрали value:-2

после calc нужно знать что graph:1 имеет сумму 4
а graph:2 имеет сумму -4

так ты хочешь?)
Ответить с цитированием
  #5 (permalink)  
Старый 12.10.2018, 14:03
Новичок на форуме
Отправить личное сообщение для Rachik Посмотреть профиль Найти все сообщения от Rachik
 
Регистрация: 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 вопросов входящих в определенную групп.
Ответить с цитированием
  #6 (permalink)  
Старый 12.10.2018, 14:19
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

Не проверял, но идея примерно такая,)
/* 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.
Ответить с цитированием
  #7 (permalink)  
Старый 12.10.2018, 14:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105


Пример: сумма выбранных инпутов каждого 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>&nbspдля определения ведущих интересов Вам предлагается перечень вопросов.<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.
Ответить с цитированием
  #8 (permalink)  
Старый 12.10.2018, 14:45
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

рони, еще надо сумму поделить на кол-во выбранных checkbox...
Ответить с цитированием
  #9 (permalink)  
Старый 12.10.2018, 14:49
Новичок на форуме
Отправить личное сообщение для Rachik Посмотреть профиль Найти все сообщения от Rachik
 
Регистрация: 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>&nbspдля определения ведущих интересов Вам предлагается перечень вопросов.<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>
Спасибо большое, вроде работает так как надо, пойду попробую теперь в полный код это подстроить
Ответить с цитированием
  #10 (permalink)  
Старый 12.10.2018, 14:50
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Сообщение от SuperZen
надо сумму поделить на кол-во выбранных checkbox
Это зачем? В ТЗ у ТС -нужны суммы по графам
Сообщение от Rachik
необходимо складывать значения активных checkbox
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Функция вызывается несколько раз KiberQ Общие вопросы Javascript 11 01.03.2017 15:45
Функция запускается кнопкой, но не запускается другой функцией или событием IndiraVarma Общие вопросы Javascript 6 30.09.2016 14:58
не вызывается функция при изменении option soft4you Общие вопросы Javascript 1 23.07.2014 17:41
AJAX функция для новых html-элементов broadcast77 AJAX и COMET 25 03.03.2014 14:01
функция и несуществующий id Ankh Элементы интерфейса 4 10.02.2012 23:49