{{ block title }}
You now have 90 seconds to summarize what you have learnt about the TIME, LOCATION and CAR involved in the deal.
{{ endblock }}
{{ block content }}

<p><Strong>Remember that for each of the 3 categories, you must indicate how certain you are</Strong>
    The time has already begun!</p>

<p></p>

<p>What is the chance that the <strong>TRANSMISSION</strong> is:</p>
{{ formfield 'T_1' }}
{{ formfield 'T_2' }}
{{ formfield 'T_3' }}
{{ formfield 'T_4' }}
<p>
    <b>Total: <span id="time"></span></b>
</p>


<p></p>

<p>What is the chance that the faulty <strong>DRIVE UNIT</strong> is: </p>
{{ formfield 'D_1' }}
{{ formfield 'D_2' }}
{{ formfield 'D_3' }}
{{ formfield 'D_4' }}
<p>
    <b>Total: <span id="loc"></span></b>
</p>

<p>What is the chance that the faulty <strong>WIRING</strong> is:</p>
{{ formfield 'W_1' }}
{{ formfield 'W_2' }}
{{ formfield 'W_3' }}
{{ formfield 'W_4' }}
<p>
    <b>Total: <span id="car"></span></b>
</p>

<script>
    let inputlist = document.getElementsByTagName('input');
    let timeDisplay = document.getElementById('time');
    let locDisplay = document.getElementById('loc');
    let carDisplay = document.getElementById('car');

    function updateSum() {
        let time = 0;
        let loc = 0;
        let car = 0;
        for (let i = 0; i < 4; i++) {
        time += parseInt(inputlist[i].value || 0);
        }
        for (let i = 4; i < 8; i++) {
        loc += parseInt(inputlist[i].value || 0);
        }
        for (let i = 8; i < 12; i++) {
        car += parseInt(inputlist[i].value || 0);
        }
        timeDisplay.innerHTML = time;
        locDisplay.innerHTML = loc;
        carDisplay.innerHTML = loc
    }

    for (let input of inputlist) {
        input.oninput = updateSum;
    }

</script>

    {{ next_button }}

{{ endblock }}