Spaces:

yasserrmd
/

CareerCompass

Sleeping

App Files Files Community

yasserrmd commited on Dec 14, 2024

Commit

3b1ec67

verified ·

1 Parent(s): 646309f

Upload 2 files

Browse files

Files changed (2) hide show

static/index.html +45 -0
static/main.js +149 -0

static/index.html ADDED Viewed

	@@ -0,0 +1,45 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Career Capability Checker</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
+  <link rel="stylesheet" href="/static/styles.css">
+  <script src="/static/main.js" defer></script>
+</head>
+<body class="bg-light">
+  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+    <div class="container-fluid">
+      <a class="navbar-brand" href="/">CareerPath</a>
+    </div>
+  </nav>
+  <div class="container py-4">
+    <div id="app">
+      <div id="form-container">
+        <div class="card">
+          <div class="card-body">
+            <h2 class="card-title text-center"><i class="bi bi-compass"></i> Determine Your Path</h2>
+            <p class="text-muted text-center">Enter your desired career and qualifications</p>
+            <form id="start-form" class="row g-3">
+              <div class="col-12">
+                <label for="career" class="form-label">Desired Career</label>
+                <input type="text" class="form-control" id="career" name="career" required>
+              </div>
+              <div class="col-12">
+                <label for="qualifications" class="form-label">Current Qualifications</label>
+                <textarea class="form-control" id="qualifications" name="qualifications" rows="3" required></textarea>
+              </div>
+              <div class="col-12 text-center">
+                <button type="submit" class="btn btn-success btn-lg">Next Step <i class="bi bi-arrow-right"></i></button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+      <div id="questions-container" style="display:none;"></div>
+      <div id="result-container" style="display:none;"></div>
+    </div>
+  </div>
+</body>
+</html>

static/main.js ADDED Viewed

	@@ -0,0 +1,149 @@

+document.addEventListener("DOMContentLoaded", () => {
+    const formContainer = document.getElementById("form-container");
+    const questionsContainer = document.getElementById("questions-container");
+    const resultContainer = document.getElementById("result-container");
+    let career = "";
+    let qualifications = "";
+    let questions = [];
+    // Handle form submission
+    document.getElementById("start-form").addEventListener("submit", async (e) => {
+      e.preventDefault();
+      career = document.getElementById("career").value;
+      qualifications = document.getElementById("qualifications").value;
+      // Fetch questions from the server
+      const response = await fetch("/start", {
+        method: "POST",
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+        body: new URLSearchParams({ career, qualifications }),
+      });
+      const data = await response.json();
+      questions = data.questions; // Save questions for later
+      renderQuestions(questions);
+    });
+    function renderQuestions(questions) {
+      formContainer.style.display = "none";
+      questionsContainer.style.display = "block";
+      resultContainer.style.display = "none";
+      questionsContainer.innerHTML = `
+        <h2 class="text-center"><i class="bi bi-question-circle"></i> Psychological Assessment</h2>
+        <form id="questions-form">
+          ${questions
+            .map(
+              (q, idx) => `
+            <div class="mb-4">
+              <p><strong id="question_${idx}">Q${idx + 1}: ${q.question}</strong></p>
+              ${Object.entries(q.choices)
+                .map(
+                  ([key, value]) => `
+                <div class="form-check">
+                  <input type="radio" name="q_${idx}" value="${value}" id="q_${idx}_${key}" required>
+                  <label for="q_${idx}_${key}">${value}</label>
+                </div>
+              `
+                )
+                .join("")}
+            </div>
+          `
+            )
+            .join("")}
+          <div class="text-center">
+            <button type="submit" class="btn btn-primary btn-lg">Submit <i class="bi bi-check-circle"></i></button>
+          </div>
+        </form>
+      `;
+      document.getElementById("questions-form").addEventListener("submit", handleQuestionsSubmit);
+    }
+    async function handleQuestionsSubmit(e) {
+      e.preventDefault();
+      const formData = new FormData(e.target);
+      const answers = [];
+      for (let idx = 0; idx < questions.length; idx++) {
+        const questionText = questions[idx].question;
+        const selectedAnswerText = formData.get(`q_${idx}`); // Get the selected answer text
+        if (selectedAnswerText) {
+          answers.push({
+            question: questionText,
+            answer: selectedAnswerText,
+          });
+        }
+      }
+      // Send the full payload with career, qualifications, and answers
+      const payload = {
+        career,
+        qualifications,
+        answers,
+      };
+      const response = await fetch("/evaluate", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      });
+      const data = await response.json();
+      // Render results
+      renderResult(data.result);
+    }
+    function renderResult(result) {
+        const { capable, roadmap, evaluation_report, motivation, alternatives } = result;
+        formContainer.style.display = "none";
+        questionsContainer.style.display = "none";
+        resultContainer.style.display = "block";
+        // Capable or Not
+        const header = `
+          <h2 class="text-center text-${capable ? "success" : "danger"}">
+            ${capable ? "You Are Capable!" : "Consider Alternatives"}
+          </h2>
+        `;
+        // Evaluation Report and Motivation
+        const evaluationReport = `
+          <h3>Evaluation Report</h3>
+          <p>${evaluation_report || "No evaluation report provided."}</p>
+          <h3>Motivation</h3>
+          <p>${motivation || "No motivational message provided."}</p>
+        `;
+        // Roadmap (only if capable is true)
+        const roadmapSection = capable && roadmap
+          ? `
+          <h3>Roadmap</h3>
+          <ul>${roadmap.map((step) => `<li>${step}</li>`).join("")}</ul>
+        `
+          : "";
+        // Alternatives (only if capable is false)
+        const alternativesSection = !capable && alternatives
+          ? `
+          <h3>Alternative Careers</h3>
+          <ul>${alternatives.map((alt) => `<li>${alt}</li>`).join("")}</ul>
+        `
+          : capable
+          ? ""
+          : "<p>No alternatives provided.</p>";
+        resultContainer.innerHTML = `
+          ${header}
+          ${evaluationReport}
+          ${roadmapSection}
+          ${alternativesSection}
+          <div class="text-center mt-4">
+            <button onclick="location.reload()" class="btn btn-secondary">Restart</button>
+          </div>
+        `;
+      }
+  });