<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.1.1/chroma.min.js"></script>
<script>
$(document).ready(function(){
$(".att").each(function() {
// var val = parseFloat($(this).text());
var val = parseFloat($(this).attr("color"));
var scale = chroma.scale(['white', 'red']);
var color = scale(val).hex();
$(this).attr("bgcolor", color);
});
})
</script>
</head>
<style>
table, th, td {border: 1px solid black}
</style>
<body>
<h2>{{ title }}</h2>
<table>
<tr>
<th>ID</th>
<th>Question</th>
<th>Answers</th>
<th>Predicted</th>
<th>Score</th>
<th>Paragraph</th>
</tr>
{% for row in rows %}
<tr>
<td>{{ row.id }}</td>
<td>
{% for qj in row.ques %}
{{ qj }}
{% endfor %}
</td>
<td>
{% for aa in row.a %}
<li>{{ aa }}</li>
{% endfor %}
</td>
<td>{{ row.ap }}</td>
<td>{{ row.score }}</td>
<td>
<table>
{% for xj, ypj, yp2j in zip(row.para, row.yp, row.yp2) %}
<tr>
{% set rowloop = loop %}
{% for xjk, ypjk in zip(xj, ypj) %}
<td class="att" color="{{ ypjk }}">
{% if row.y[0][0] == rowloop.index0 and row.y[0][1] <= loop.index0 <= row.y[1][1] %}
<b>{{ xjk }}</b>
{% else %}
{{ xjk }}
{% endif %}
</td>
{% endfor %}
</tr>
<tr>
{% for xjk, yp2jk in zip(xj, yp2j) %}
<td class="att" color="{{ yp2jk }}">-</td>
{% endfor %}
</tr>
{% endfor %}
</table>
</td>
</tr>
{% endfor %}
</table>
</body>
</html>