{{ block title }}
    Introduction
{{ endblock }}
{{ block content }}

<h3>Task: Card Matching</h3>
    You will now complete a task. In this task, you must match cards according to rules that you must deduce. Read the explanation below and click the Next button when you are ready to begin the task.<br><br>

<h3>Game Screen</h3>
    During the task, you will see a screen like the one shown below: a row of four different cards and a single card beneath it. You guess which of the four above cards matches the single below card based on either the color, shape, or number of items on the card.<br><br>
    You make a guess by clicking the above card you believe matches the below card one. You then are shown a ✓ when your guess is correct and a ✗ when the guess is not correct.<br><br>
    Note: the matching rule periodically changes throughout the game.<br><br>

    <style>
        .wisc-card {
            width: 10rem;
            height: 14rem;
            align-items: center;
            justify-content: center;
        }
        
        .wisc-img {
            display: block;
        }
    
        #feedback {
            font-size: x-large;
        }
    </style>
    
    <div class="container">
    
        <p id="feedback"></p>
    
        <div class="row">
            {{ for deck_number in deck_numbers }}
            <div class="col">
                <button type="button" onclick="selectDeck(this)" value="{{ deck_number }}" class="btn-card">
                    <!-- it's just a coincidence that we use the bootstrap 'card' element to represent a card :) -->
                    <div class="card wisc-card">
                        <div class="card-body" id="deck-{{deck_number}}">
                        </div>
                    </div>
                </button>
            </div>
            {{ endfor }}
    
        </div>
    
        <br>
        <p></p>
        <div class="card wisc-card">
            <div class="card-body" id="test-card">
            </div>
        </div>    
<br><br>
<h3>Remuneration</h3>
    You will receive <b>{{ C.CORRECT_ANSWER_FEE }}</b> for each correct guess you make.<br><br>
    
    
    {{ next_button }}

    <script>
        function makeCardContent({number, shape, color}) {
        let images = [];
        for (let i = 0; i < number; i++) {
            let image = `<img src="/static/wisconsin/${shape}-${color}.svg" width="50em" class="wisc-img">`;
            images.push(image);
        }
        return images.join('');
    }

    function liveRecv(data) {
        if ('finished' in data) {
            document.getElementById('form').submit();
            return;
        }
        if ('feedback' in data) {
            msgFeedback.innerHTML = data.feedback;
        }
        if ('decks' in data) {
            for (let i = 0; i < 4; i++) {
                document.getElementById(`deck-${i}`).innerHTML = makeCardContent(data.decks[i])
            }
        }
        if ('test_card' in data) {
            document.getElementById(`test-card`).innerHTML = makeCardContent(data.test_card);
        }

        msgProgress.innerHTML = data.num_trials;

        for (let btn of buttons) {
            btn.disabled = '';
        }
        
        displayed_timestamp = performance.now();

        console.log('displayed_timestamp: ',displayed_timestamp)
        console.log('liverecv')

    }

    document.addEventListener("DOMContentLoaded", function (event) {
        liveSend({});
    });

    </script>


{{ endblock }}