Показать сообщение отдельно
  #7 (permalink)  
Старый 12.10.2018, 14:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064


Пример: сумма выбранных инпутов каждого 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.
Ответить с цитированием