{{ extends 'global/Page.html' }}
{{ block title }}AI Advice{{ endblock }}

{{ block content }}

<p>You have heard about a new AI doctor that takes MRI scans and is able to produce suggestions on treatment options based on real-world medical data. At home, you upload your MRI scan to the system and the AI suggests the following:
</p>

<p><b>Your Recommendation:</b>Surgery</p>
<br>

<p><b>Accuracy:</b>For patients that are between {{player.age}} old and perform {{player.activity}} per week, the accuracy of successful diagnosis by the AI for patients that had similar AI scans was 75%.</p> 

<br>
<div>
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
  const ctx = document.getElementById('myChart');
    
  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['accurate diagnosis', 'inaccurate diagnosis'],
      datasets: [{
        label: 'Diagnosed patients with similar characteristics',
        data: [375000,125000],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>
<br>
<div class="likelihood">
{{ formfields }}
</div>

<div class="button">
{{ next_button }}
</div>

{{ endblock }}