JSFiddle - React, Tailwind, and code Playground

by Alex Cowan

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Check In Questionnaire</title>
  </head>

  <body>

    <div class="container-box" id="your-div-id">
      <div class="header">
        <h1>It's Time to Complete a Check In!</h1>
      </div>

      <table class="question-table">
        <thead>
          <tr>
            <th>Over the last two weeks, how often have you been bothered by the following problems?</th>
            <th>Not At All</th>
            <th>Several Days</th>
            <th>More Than Half the Days</th>
            <th>Nearly Everyday</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Feeling nervous, anxious, or on the edge</td>
            <td><input type="radio" name="feeling" value="100%"></td>
            <td><input type="radio" name="feeling" value="75%"></td>
            <td><input type="radio" name="feeling" value="50%"></td>
            <td><input type="radio" name="feeling" value="25%"></td>
          </tr>
          <tr>
            <td>Not being able to stop or control worrying</td>
            <td><input type="radio" name="worrying" value="100%"></td>
            <td><input type="radio" name="worrying" value="75%"></td>
            <td><input type="radio" name="worrying" value="50%"></td>
            <td><input type="radio" name="worrying" value="25%"></td>
          </tr>
          <tr>
            <td>Not being able to stop or control worrying</td>
            <td><input type="radio" name="No Control" value="100%"></td>
            <td><input type="radio" name="No Control" value="75%"></td>
            <td><input type="radio" name="No Control" value="50%"></td>
            <td><input type="radio" name="No Control" value="25%"></td>
          </tr>
          <tr>
            <td>Worrying too much about different things</td>
            <td><input...

CSS

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.container-box {
    max-width: 800px;
    margin: 20px auto;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
}

.header {
    background-color: #3498db;
    color: #fff;
    text-align: center;
    padding: 20px;
}

.question-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    table-layout: fixed;
}

.question-table th:first-child, .question-table td:first-child {
  width: 40%;
  text-align: left;
}

.question-table th, .question-table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
    width: 15%;
}

.options input {
    margin: 0;
}

.submit-box {
    text-align: center;
    margin-top: 20px;
}

#submit-button {
    background-color: #3498db;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
}

#submit-button:hover {
    background-color: #45a049;
}

JavaScript

document.addEventListener('DOMContentLoaded', function () {
    var containerDiv = document.getElementById('your-div-id'); // Replace 'your-div-id' with your actual div ID
    if (!containerDiv) {
        
        return;
    }

    document.getElementById('submit-button').addEventListener('click', function () {
        submitForm(containerDiv);
    });
});

function submitForm(containerDiv) {
    // Remove previous result if exists
    var previousResult = containerDiv.querySelector('.result-container');
    if (previousResult) {
        containerDiv.removeChild(previousResult);
    }

    var tableRows = containerDiv.querySelectorAll('.question-table tbody tr');
    var totalScore = 0;
    var answeredCount = 0;

    // Loop through each row in the table
    tableRows.forEach(function (row) {
        var radioButtons = row.querySelectorAll('input[type="radio"]:checked');
        if (radioButtons.length === 0) {
            alert("Error: Please answer all questions.");
            return;
        }

        // Add the selected value to the total score
        totalScore += parseInt(radioButtons[0].value);
        answeredCount++;
    });

    // Check if all questions are answered
    if (answeredCount !== tableRows.length) {
        return;
    }

    // Calculate average
    var average = totalScore / answeredCount;

    // Display result
    var resultDiv = document.createElement('div');
    resultDiv.className = 'result-container';
    resultDiv.style.marginTop = '20px';

    // Apply styling based on the score
    if (average > 75) {
        resultDiv.style.color = 'green';
        resultDiv.innerHTML = '<strong>Score: ' + average.toFixed(2) + '%</strong>' +
            '<p style="color: black;">You are at a good place mentally.</p>';
    } else if (average >= 50 && average <= 75) {
        resultDiv.style.color = 'orange';
        resultDiv.innerHTML = '<strong>Score: ' + average.toFixed(2) + '%</strong>' +
            '<p style="color: black;">You are at...