| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Student Personality Analysis</title> |
| <link rel="stylesheet" href="/css/style.css" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| </head> |
| <body> |
| <div class="container"> |
| |
| <div class="main-content"> |
| <div> |
| <h1>Student Personality Analysis</h1> |
| <p> |
| Enter marks to determine personality traits based on academic |
| performance. |
| </p> |
| </div> |
|
|
| <% if (result) { %> |
| <div class="result-box"> |
| <h3>Analysis Result</h3> |
| <p><strong>Student Name:</strong> <%= result.name %></p> |
| <p><strong>Average Marks:</strong> <%= result.avg %></p> |
| <p> |
| <strong>Grade Achieved:</strong> |
| <span><%= result.grade %></span> |
| </p> |
| <p><strong>Personality Trait:</strong> <%= result.trait %></p> |
| <br /> |
| <a href="/">Analyze Another Student</a> |
| </div> |
| <% } %> |
|
|
| <div> |
| <h3>Enter Marks</h3> |
| <form action="/result" method="post"> |
| <label for="name">Student Name</label> |
| <input |
| type="text" |
| name="name" |
| placeholder="e.g. Inderjeet" |
| required |
| /> |
| <br> |
|
|
| <label for="sub1">Subject 1 Marks (0-100)</label> |
| <input |
| type="number" |
| name="sub1" |
| placeholder="0-100" |
| min="0" |
| max="100" |
| required |
| /> |
| <br> |
|
|
| <label for="sub2">Subject 2 Marks (0-100)</label> |
| <input |
| type="number" |
| name="sub2" |
| placeholder="0-100" |
| min="0" |
| max="100" |
| required |
| /> |
| <br> |
|
|
| <label for="sub3">Subject 3 Marks (0-100)</label> |
| <input |
| type="number" |
| name="sub3" |
| placeholder="0-100" |
| min="0" |
| max="100" |
| required |
| /> |
| <br> |
|
|
| <button type="submit">Analyze Personality</button> |
| </form> |
| </div> |
| </div> |
|
|
| |
| <div class="sidebar"> |
| <div> |
| <h3>Recent Analysis History</h3> |
| <% if (history && history.length > 0) { %> |
| <table> |
| <thead> |
| <tr> |
| <th>Name</th> |
| <th>Sub1</th> |
| <th>Sub2</th> |
| <th>Sub3</th> |
| </tr> |
| </thead> |
| <tbody> |
| <% history.forEach(function(h) { %> |
| <tr> |
| <td><%= h.name %></td> |
| <td><%= h.subject1 %></td> |
| <td><%= h.subject2 %></td> |
| <td><%= h.subject3 %></td> |
| </tr> |
| <% }); %> |
| </tbody> |
| </table> |
| <% } else { %> |
| <p>No history yet.</p> |
| <% } %> |
| </div> |
|
|
| <div> |
| <h3>Grade Rules</h3> |
| <table> |
| <thead> |
| <tr> |
| <th>Range</th> |
| <th>Grade</th> |
| </tr> |
| </thead> |
| <tbody> |
| <% rules.forEach(function(r) { %> |
| <tr> |
| <td><%= r.min_avg %> - <%= r.max_avg %></td> |
| <td><%= r.grade %></td> |
| </tr> |
| <% }); %> |
| </tbody> |
| </table> |
| </div> |
|
|
| <div> |
| <h3>Personality Traits</h3> |
| <table> |
| <thead> |
| <tr> |
| <th>Grade</th> |
| <th>Trait</th> |
| </tr> |
| </thead> |
| <tbody> |
| <% traits.forEach(function(t) { %> |
| <tr> |
| <td><%= t.grade %></td> |
| <td><%= t.trait %></td> |
| </tr> |
| <% }); %> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
| </body> |
| </html> |
|
|
