Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Personality Step {{ step }} of {{ total_steps }}</title> | |
| <link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon-removebg.png') }}"> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> | |
| <link href="https://fonts.googleapis.com/css?family=Playfair+Display:800,900|Montserrat:400,600,700&display=swap" rel="stylesheet"> | |
| <script> | |
| function validateForm() { | |
| const inputs = document.querySelectorAll('.mcq-options input[type="radio"]:checked'); | |
| if (inputs.length < 4) { | |
| alert("Please answer all 4 questions to continue."); | |
| return false; | |
| } | |
| return true; | |
| } | |
| </script> | |
| </head> | |
| <body class="animated-bg"> | |
| <div class="glass-container fade-in"> | |
| <div class="header neon-glow"> | |
| <h1>🧩 Step {{ step }} of {{ total_steps }}</h1> | |
| <div class="progress-bar glass-progress"> | |
| <div class="progress" style="width: {{ (step / total_steps) * 100 }}%"></div> | |
| </div> | |
| <h2>{{ trait_label }} Questions</h2> | |
| </div> | |
| <form method="post" action="{{ url_for('mcq', step=step+1) }}" onsubmit="return validateForm();" class="mcq-form"> | |
| <div class="mcq-section"> | |
| {% for qtext in questions %} | |
| <div class="input-group mcq-options"> | |
| <label><b>Q{{ loop.index }}:</b> <span>{{ qtext }}</span></label> | |
| <div class="mcq-row"> | |
| <label> | |
| <input type="radio" name="{{ trait_key }}_q{{ loop.index }}" value="A" required> | |
| <span>Excellent/Always</span> | |
| </label> | |
| <label> | |
| <input type="radio" name="{{ trait_key }}_q{{ loop.index }}" value="B"> | |
| <span>Good/Usually</span> | |
| </label> | |
| <label> | |
| <input type="radio" name="{{ trait_key }}_q{{ loop.index }}" value="C"> | |
| <span>Fair/Sometimes</span> | |
| </label> | |
| <label> | |
| <input type="radio" name="{{ trait_key }}_q{{ loop.index }}" value="D"> | |
| <span>Poor/Rarely</span> | |
| </label> | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| <button type="submit" class="next-btn glass-btn">{% if step == total_steps %}See Results{% else %}Next{% endif %}</button> | |
| </form> | |
| </div> | |
| </body> | |
| </html> | |