Hugging Face's logo

Spaces:
abhicodes
/
smilecheck
Runtime error

App Files Community
smilecheck / templates /result.html
abhicodes's picture
abhicodes
Upload 69 files
41b4437
raw
history blame
7.77 kB
<!--<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Result</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>-->
{% extends 'layout.html' %}
{% block title %} Custom Form {% endblock %}
{% block link %} {% endblock %}
{% block content %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<br><br><br>
<div class="flexContainer">
<div class="flex1">
<div class="forminfo-result">
<div id="name" style="padding:20px; text-align:center; font-size: 28px; font-weight:700;">Happy Index</div>
<div class="happy-score">{{ res4 }}</div>
<p id="name" style="padding:20px;"><b>Name of Assessment : </b><br>{{ res8['name'] }}</p>
<p id="name" style="padding:20px;"><b>Description :</b> {{ res8['description'] }}</p>
</div>
</div>
<div id="flex2" class="flex2">
<div class="text-content-congo"><img src="static/party-popper.png" alt="Congo" width="35px"> &nbsp; Congratulations! You've completed the SmileCheck assessment.</div>
<script>
const congo = document.querySelector(".text-content-congo");
const parent = document.getElementById("flex2");
setTimeout(() => {
parent.removeChild(congo);
}, 3000);
</script>
<div class="text-content-header" style="font-size:28px; font-weight:700; padding:10px;"> Assessment Analysis</div>
<!-- <div class="text-content1">The SmileCheck assessment provides a personalized analysis of students' happiness and wellbeing using advanced sentiment analysis. This analysis generates a happiness index score and identifies areas for improvement, providing students with personalized recommendations and resources to make positive changes.</div>-->
<div class="flexsub">
<div class="navsub1">
<p id="change">Result Graph</p>
</div>
<div class="navsub2">
<button class="sub1" id="myButton"><p id="buttontext">See Responses <i class="uil uil-arrow-right"></i></button>
<button class="sub1" id="myButton2" style="display:none;"><p id="buttontext">Check Result Graph <i class="uil uil-arrow-right"></i></button>
</div>
</div>
<div id="graph" style="display:block;">
<div class="chart">
<canvas id="myChart"></canvas>
<p class="caption">Assessment Analysis</p>
</div>
<script>
// Chart configuration
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: {{ques|safe}},
datasets: [{
barPercentage: 0.5,
minBarLength: 5,
borderRadius:5,
label: ' Your Score',
data: {{res2}},
backgroundColor: [
'rgba(255, 206, 86, 0.6)',
],
borderColor: [
'rgba(255, 206, 86, 1)',
],
borderWidth: 1
},
{
barPercentage: 0.5,
minBarLength: 5,
borderRadius:5,
label: ' Average Score',
data: {{res5}},
backgroundColor: [
'rgba(255, 206, 86, 0.2)',
],
borderColor: [
'rgba(255, 206, 86, 1)',
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
scaleLabel: {
display: true,
labelString: '% Compared to Average'
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Data Points'
}
}]
}
}
});
</script>
</div>
<div id="questions" style="display:none;">
{% set questions_list = res9['Questions'][2:-2].split('", "') %}
{% for i in range(1, questions_list|count+1) %}
{% set j = res9['response'][2:-2].split('", "') %}
{% set k = res9['result']%}
{% set l = res2[1:-1].split(', ') %}
<div class="qres">
<div class="qflex1">
<div id="progressdiv{{loop.index}}" class="progressdiv"></div>
<script>
const progressDiv{{loop.index}} = document.getElementById('progressdiv{{loop.index}}');
var temp = eval({{ k }})[{{loop.index-1}}];
if (eval({{ k }})[{{loop.index-1}}] > 0) {
progressDiv{{loop.index}}.style.background = 'linear-gradient(to top, #00ff00 {{l[loop.index-1]}}%, white 50%, white 100%)';
}
else if (eval({{ k }})[{{loop.index-1}}] < 0) {
progressDiv{{loop.index}}.style.background = 'linear-gradient(to bottom, red {{l[loop.index-1]}}%, white 50%, white 100%)';
}
</script>
<p>{{l[loop.index-1]}}</p>
</div>
<div class="qflex2">
<div class="quest">
<b>Question {{ loop.index }}: </b>{{ questions_list[i-1] }}
</div>
<div class="response">
{{ j[loop.index-1] }}
</div>
</div>
</div>
{% endfor %}
</div>
<button class="accordion"><a href="#previous-data" id="jump-link5" style="text-decoration: none !important;"><b>Suggestions</b></a></button>
<div class="panel">
<div class="domains">
<!-- <div class="text-content1">Your happiness index score is <b>{{ res4 }}</b>. Based on your responses, our sentiment analysis tool has identified the following areas where you could focus on to improve your overall wellbeing.</div>-->
{% for key, value in res7.items() %}
<div class="each-domain">
<div class="average-score"><span style="display:flex; justify-content:space-around;"><img src="/static/parameters/{{ key }}.png" alt="wellbeing" width="45px;" style="flex-basis:20%;"><span style="flex-basis:50%;">{{ value['average_score'] }}</span></span></div>
<div class="name">{{ value['name'] }}</div>
<div class="description">{{ value['description'] }}</div><br>
<div class="suggestions-text">
{% for suggestion in value['suggestions_text'][0] %}
<p><img src="/static/chat.png" style="height:20px; width:20px;"> &nbsp; <b>Suggestion {{ loop.index }} :</b> {{ suggestion }}</p>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<div class="text-content-end">Remember, improving your happiness is a journey, and we're here to support you every step of the way. <br>Thank you for using SmileCheck. <br>We wish you all the best on your journey to greater happiness and wellbeing.</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>
<script>
const myButton = document.getElementById("myButton");
const pText = document.getElementById("change");
const buttonText = document.getElementById("buttontext");
const graphDiv = document.getElementById("graph");
const questionsDiv = document.getElementById("questions");
myButton.addEventListener("click", () => {
graphDiv.style.display = "none";
questionsDiv.style.display = "block";
myButton.style.display = "none";
myButton2.style.display = "block";
pText.innerText = "Questions";
});
myButton2.addEventListener("click", () => {
graphDiv.style.display = "block";
questionsDiv.style.display = "none";
myButton.style.display = "block";
myButton2.style.display = "none";
pText.innerText = "Result Graph";
});
</script>
{% endblock %}
<!--</body>
</html>-->