{% extends "global/Page.html" %}
{% load staticfiles otree %}

{% block title %}
    
{% endblock %}

{% block content %}

   <div class="performance">
      
    <table class="table1">
    
    
 
    <tr align="center">
                <td><strong>Task</strong></td>
                <td><strong>Correct</strong></td>
                
    </tr>  
    
    
    <tr align="center">
                <td ><strong>1: Count b</strong></td>
                <td ><strong>{{participant.vars.correct_b}} </strong></td>
                
    </tr> 
    <tr align="center">
                <td ><strong>2: Count d</strong></td>
                <td ><strong>{{participant.vars.correct_d}} </strong></td>
                
    </tr> 
    <tr align="center">
                <td ><strong>3: Count p</strong></td>
                <td ><strong>{{participant.vars.correct_p}} </strong></td>
                
    </tr> 
    <tr align="center">
                <td ><strong>4: Count q</strong></td>
                <td ><strong>{{participant.vars.correct_q}} </strong></td>
                
    </tr> 
    <tr align="center">
                <td ><strong>5: 2-digits </strong></td>
                <td ><strong>{{participant.vars.correct_sd}} </strong></td>
                
    </tr>
    <tr align="center">
                <td ><strong>6: 3-digits</strong></td>
                <td ><strong>{{participant.vars.correct_dd}} </strong></td>
                
    </tr> 
    <tr align="center">
                <td ><strong>7: 4-digits</strong></td>
                <td ><strong>{{participant.vars.correct_td}} </strong></td>
                
    </tr> 
    <tr align="center">
                <td ><strong>8: 5-digits</strong></td>
                <td ><strong>{{participant.vars.correct_qd}} </strong></td>
                
    </tr> 
    </table>
    
    </div>


    
 


{% endblock %}


{% block styles %}




 
   <style>
   .table1 td {
                    
                    border: 1px solid #186A3B;
                    padding:0px;
                    margin:auto;
                    
      
                    
                    
                 } 
                 

      
    .table1 tr:nth-child(even) {
    background-color: white
    }
    .table1 tr:nth-child(odd) {
    background-color: lightgrey
    } 
  
        
      .table1 {
            
            border: 0px;
            padding:0px;
            margin:auto;
            width:100%;
            height:100%;
            border-collapse: collapse;
          }
    
    
   </style>
 


{% endblock %}