|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<title>Trial Result</title> |
|
|
<style> |
|
|
body { |
|
|
font-family: Arial, sans-serif; |
|
|
background-color: #f0f0f0; |
|
|
margin: 0; |
|
|
padding: 20px; |
|
|
} |
|
|
h2 { |
|
|
color: #333; |
|
|
} |
|
|
p { |
|
|
margin-top: 10px; |
|
|
} |
|
|
.result { |
|
|
margin-top: 20px; |
|
|
padding: 20px; |
|
|
background-color: #fff; |
|
|
border: 1px solid #ccc; |
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1); |
|
|
} |
|
|
.result p { |
|
|
margin: 5px 0; |
|
|
} |
|
|
.result span { |
|
|
font-weight: bold; |
|
|
} |
|
|
.accurate { |
|
|
color: green; |
|
|
} |
|
|
.inaccurate { |
|
|
color: red; |
|
|
} |
|
|
ul { |
|
|
margin-top: 10px; |
|
|
padding-left: 20px; |
|
|
} |
|
|
li { |
|
|
margin-top: 5px; |
|
|
} |
|
|
table { |
|
|
width: 30%; |
|
|
margin-left: auto; |
|
|
margin-right: auto; |
|
|
border-collapse: separate; |
|
|
border-spacing: 0; |
|
|
} |
|
|
th, td { |
|
|
border: 1px solid #ccc; |
|
|
padding: 10px; |
|
|
text-align: left; |
|
|
} |
|
|
th { |
|
|
background-color: #f2f2f2; |
|
|
border-color: #ccc; |
|
|
} |
|
|
td { |
|
|
background-color: #ffffff; |
|
|
border-color: #ccc; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<h2>ADHD Predictive Analysis Demo Results</h2> |
|
|
<div class="result"> |
|
|
<table> |
|
|
<tr> |
|
|
<td>Age:</td> |
|
|
<td>{{ age }}</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td>Handedness:</td> |
|
|
<td>{{ handedness }}</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td>Sex:</td> |
|
|
<td>{{ sex }}</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td>ADHD:</td> |
|
|
<td>{% if "don't" in adhd %}<span style="color: green;">{{ adhd }}</span>{% else %}<span style="color: red;">{{ adhd }}</span>{% endif %}</td> |
|
|
</tr> |
|
|
</table> |
|
|
<h3>Reaction Times:</h3> |
|
|
<ul> |
|
|
{% for reaction in reaction_times %} |
|
|
{% if reaction.accurate %} |
|
|
<li class="accurate">Question {{ reaction.index }}: {{ reaction.time }} seconds. You chose Option {{ reaction.chosen_option+1 }}, which was correct!</li> |
|
|
{% else %} |
|
|
<li class="inaccurate">Question {{ reaction.index }}: {{ reaction.time }} seconds. You chose Option {{ reaction.chosen_option+1 }}, correct answer was Option {{ reaction.correct_option+1 }}</li> |
|
|
{% endif %} |
|
|
{% endfor %} |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
</body> |
|
|
</html> |
|
|
|
