Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Relationship Insight</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f2f2f2;
      margin: 0;
      padding: 40px 20px;
      display: flex;
      justify-content: center;
    }
    #app {
      background: #fff;
      border-radius: 10px;
      padding: 30px;
      max-width: 600px;
      width: 100%;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    h2 {
      text-align: center;
      margin-bottom: 20px;
    }
    .question p {
      font-weight: bold;
    }
    .answer-btn {
      display: block;
      width: 100%;
      margin: 8px 0;
      padding: 12px;
      border: none;
      background: #e0e0e0;
      border-radius: 5px;
      cursor: pointer;
    }
    .answer-btn:hover {
      background: #ccc;
    }
    #result-box {
      text-align: center;
      padding: 20px;
      font-size: 20px;
      color: #fff;
      border-radius: 10px;
    }
    .red { background-color: #ff4c4c; }
    .orange { background-color: #ff9f33; }
    .yellow { background-color: #ffcc00; color: #000; }
    .green { background-color: #66cc66; }
    .blue { background-color: #3399ff; }
    .violet { background-color: #8a2be2; }
    .white { background-color: #ffffff; color: #000; }
    #start-btn, #restart-btn {
      margin: 20px auto;
      display: block;
      padding: 12px 20px;
      font-size: 16px;
      background: #007bff;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="app">
    <h2>Relationship Insight</h2>
    <button id="start-btn">Start</button>
    <div id="quiz-container" style="display:none;"></div>
    <div id="result-container" style="display:none;">
      <div id="result-box"></div>
      <button id="restart-btn">Start Again</button>
    </div>
  </div>

  <script>
    const questions = [
      {
        text: "What makes you feel secure in your relationship?",
        answers: ["Financial stability", "Emotional bonding", "Shared responsibilities", "Trust & loyalty", "Open communication", "Shared values", "Spiritual alignment"]
      },
      {
        text: "How do you emotionally connect with your partner?",
        answers: ["Physical closeness", "Frequent dates", "Deep conversations", "Doing things together", "Sharing secrets", "Support in stress", "Honest communication"]
      },
      {
        text: "What causes most disagreements?",
        answers: ["Money", "Time", "Communication", "Values", "Family", "Intimacy", "Social circle"]
      },
      {
        text: "What do you value most?",
        answers: ["Independence", "Romance", "Stability", "Growth", "Fun", "Spirituality", "Loyalty"]
      },
      {
        text: "Your conflict resolution style?",
        answers: ["Avoid", "Compromise", "Argue", "Talk", "Take a break", "Apologize", "Seek help"]
      },
      {
        text: "What best defines your future vision?",
        answers: ["We’re unsure", "We’re aligned", "Need clarity", "Plan together", "Growing apart", "We dream together", "Very clear goals"]
      },
      {
        text: "How often do you express love?",
        answers: ["Rarely", "Sometimes", "Occasionally", "Frequently", "Daily", "All the time", "Always in new ways"]
      }
    ];

    const app = document.getElementById('app');
    const quizContainer = document.getElementById('quiz-container');
    const resultContainer = document.getElementById('result-container');
    const resultBox = document.getElementById('result-box');
    const startBtn = document.getElementById('start-btn');
    const restartBtn = document.getElementById('restart-btn');

    let currentQuestion = 0;
    let score = 0;

    function resetQuiz() {
      currentQuestion = 0;
      score = 0;
      quizContainer.innerHTML = '';
      quizContainer.style.display = 'block';
      resultContainer.style.display = 'none';
      showQuestion();
    }

    function showQuestion() {
      if (currentQuestion >= questions.length) {
        showResult();
        return;
      }
      const q = questions[currentQuestion];
      quizContainer.innerHTML = `
        <div class="question">
          <p>${q.text}</p>
          ${q.answers.map((ans, i) => `<button class="answer-btn" onclick="selectAnswer(${i + 1})">${ans}</button>`).join('')}
        </div>
      `;
    }

    window.selectAnswer = function(scoreValue) {
      score += scoreValue;
      currentQuestion++;
      showQuestion();
    }

    function showResult() {
      const percentage = Math.round((score / (questions.length * 7)) * 100);
      let colorClass = 'red';
      if (percentage === 50) colorClass = 'orange';
      else if (percentage === 60) colorClass = 'yellow';
      else if (percentage === 70) colorClass = 'green';
      else if (percentage === 80) colorClass = 'blue';
      else if (percentage === 90) colorClass = 'violet';
      else if (percentage === 100) colorClass = 'white';

      resultBox.innerHTML = `Your Compatibility Score: ${percentage}%`;
      resultBox.className = `result-box ${colorClass}`;
      quizContainer.style.display = 'none';
      resultContainer.style.display = 'block';
    }

    startBtn.addEventListener('click', () => {
      startBtn.style.display = 'none';
      resetQuiz();
    });

    restartBtn.addEventListener('click', () => {
      startBtn.style.display = 'none';
      resetQuiz();
    });
  </script>
</body>
</html>

Keshav Chopra