Skip to content

sakura.jpg #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ChristineDavis-143 wants to merge 8 commits into
base: gh-pages
Choose a base branch
from
Open

sakura.jpg #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
95e7731
sakura.jpg
ChristineDavis-143 Mar 8, 2026
757cdec
Enhance burnout and stress diagnostic app
ChristineDavis-143 Mar 8, 2026
6045e29
Update index.html
ChristineDavis-143 Mar 8, 2026
485afc5
Update index.html
ChristineDavis-143 Mar 8, 2026
87a52dd
Update index.html
ChristineDavis-143 Mar 8, 2026
8016a5b
Update index.html
ChristineDavis-143 Mar 8, 2026
a81df20
Update index.html
ChristineDavis-143 Mar 8, 2026
07aa46f
Update index.html
ChristineDavis-143 Mar 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
184 changes: 177 additions & 7 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,10 @@
triedel@utexas.edu

Brief Description of Goal of Code:
blah, blah, blah,
This app is to be used as a diagnostic code to identify whether someone is struggling with burnout or temporary stress.

Known Issues:
blah, blah, blah, blah
Feeling overwhelmed, emotionally exhausted, tired after resting, decrease in motivation, irritability, recent stress, numbness towards work or school
Ignore this error message if you see it using the javaScript console: Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'interest-cohort'.

References:
Expand All @@ -29,16 +29,60 @@
-->

<head>
<title>Hello World</title>
] <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Burnout vs Temporary Stress</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="w3-colors-flat.css">
</head>

<script>

//YOUR JAVASCRIPT GOES HERE
/* Counters */
var burnout_score = 0;
var stress_score = 0;
var question_count = 0;

function addBurnout(weight){
burnout_score += weight;
question_count += 1;
}

function addStress(weight){
stress_score += weight;
question_count += 1;
}

function showResults(){
var total = burnout_score + stress_score;
var resultText = document.getElementById("results");

if (total == 0){
resultText.innerHTML = "No answers selected.";
return;
}

var burnoutPercent = Math.round((burnout_score / total) * 100);
var stressPercent = Math.round((stress_score / total) * 100);

var message = "";

if (burnoutPercent >= 70){
message = "<br><br>You show strong signs of burnout.";
}
else if (stressPercent >= 70){
message = "<br><br>Your symptoms match those of temporary stress.";
}
else{
message = "<br><br>You show a mix of both patterns.";
}

resultText.innerHTML =
"Burnout Likelihood = " + burnoutPercent + "%<br>" +
"Temporary Stress Likelihood = " + stressPercent + "%" +
message;
}


</script>

Expand All @@ -64,12 +108,138 @@
left: 0vw;
z-index: 1;
}
/* adding image requirement*/
img, object{
max-height: 90%;
max-width: 90%;
}
/* learned how to add pink and blue buttons so I'll add them here */
.pink-btn{
background-color:#ff4da6;
color:white;
}

.blue-btn{
background-color:#4da6ff;
color:white;
}
</style>

<body>

<!-- HERE IS WHERE ALL OF YOUR HTML PAGES GO -->
REPLACE THIS TEXT
<div id="header" class="w3-container w3-flat-carrot">
<h1>Burnout or Temporary Stress?</h1>
</div>

<div id="content" class="w3-container">
<p>Are you feeling like you might have burnout but wonder if it is just temporary stress. Answer a few short questions to find out!</p>

<a href="#one" class="w3-btn w3-grey w3-round"> Get Started </a>

<h3>Take a calming moment</h3> <!--adding sakura image-->
<img id="calmImage" src="sakura.jpg" alt="Cherry blossoms"><!--had to change the formatting here and add my jpg-->



<p>The following code has been developed by students and/or researchers of the Freshman Research Initiative DIY Diagnostics Stream at The University of Texas at Austin. This code is shared for demonstration purposes and should not be considered a product -- it is for entertainment purposes only. Any user of this code does so at their own risk. Members of the DIY Stream, FRI, and The University of Texas system are not liable for anything related to this code.</p>

<p>THIS CODE SHOULD NOT BE USED TO DIAGNOSE ANY KIND OF MEDICAL CONDITION.</p>
</div>

<div class="page" id="one">
<div id="header" class="w3-container w3-flat-carrot">
<h1>Question 1</h1>
</div>

<div id="content" class="w3-container">
<p>Have you felt emotionally exhausted for more than 2 weeks?</p>
<a href="#two" onclick= "addBurnout(1)" class="w3-btn pink-btn">Yes</a><!--buttons were acting out so I changed the formatting a bit-->
<a href="#two" onclick= "addStress(1)" class="w3-btn blue-btn">No</a>
</div> <!-- My first question adding 2 buttons for burnout and stress and letting them be different colors-->
</div>

<div class="page" id="two">
<div class="w3-container w3-flat-carrot">
<h1>Question 2</h1>
</div>

<div id="content" class="w3-container">
<p>Do you feel tired even after sleeping?</p>
<a href="#three" onclick= "addBurnout(1)" class="w3-btn pink-btn">Yes</a><!--adding number values inside for weighted scoring-->
<a href="#three" onclick= "addStress(1)" class="w3-btn blue-btn">No</a>
</div>
</div>

<div class="page" id="three">
<div class="w3-container w3-flat-carrot">
<h1>Question 3</h1>
</div>

<div id="content" class="w3-container">
<p>Have you lost motivation for things you usually care about?</p>
<a href="#four" onclick= "addBurnout(1)" class="w3-btn pink-btn">Yes</a>
<a href="#four" onclick= "addStress(1)" class="w3-btn blue-btn">No</a>
</div><!--My third question buttons function the same as the last -->
</div><!--Just figured out I need this div here for spacing. Had too many div's earlier so it was hard to read-->

<div class="page" id="four">
<div class="w3-container w3-flat-carrot">
<h1>Question 4</h1>
</div>

<div id="content" class="w3-container">
<p>Do you feel detached or numb towards your school or work?</p>
<a href="#five" onclick= "addBurnout(1)" class="w3-btn pink-btn">Yes</a>
<a href="#five" onclick= "addStress(1)" class="w3-btn blue-btn">No</a>
</div>
</div>

<div class="page" id="five">
<div class="w3-container w3-flat-carrot">
<h1>Question 5</h1>
</div>

<div id="content" class="w3-container">
<p>Are you more irritable than usual?</p>
<a href="#six" onclick="addBurnout(1)" class="w3-btn pink-btn">Yes</a><!--changed button colors hehe-->
<a href="#six" onclick="addStress(1)" class="w3-btn blue-btn">No</a>
</div>
</div>

<div class="page" id="six"><!--change page -->
<div class="w3-container w3-flat-carrot">
<h1>Question 6</h1>
</div>

<div id="content" class="w3-container">
<p>Did this stress start recently (less than 2 weeks ago)?</p>
<a href="#resultsPage" onclick="addStress(1)" class="w3-btn blue-btn">Yes</a>
<a href="#resultsPage" onclick="addBurnout(1)" class="w3-btn pink-btn">No</a>
</div>
</div><!--the #resultsPage on the buttons are added to make sure this goes to the results page instead of page 7-->


<div class="page" id="resultsPage"><!-- instead of page 7 I had to change this to results page-->
<div class="w3-container w3-flat-carrot">

<h1>Results</h1>
</div>

<div class="w3-container">

<button onclick="showResults()" class="w3-btn w3-green">
Show Results <!--Make sure to add this so it shows on the page-->
</button>

<p id="results"></p><!--make sure the page shows the results and identifies as the results page from the previous question-->

</div>
</div>


<footer class="w3-bottom w3-container w3-flat-carrot">
<p>DIY!</p>
</footer><!--finished the app:) made sure the footer was here properly-->

</body>
</html>
Binary file added sakura.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.