Quize

<?php
/*
Plugin Name: AI Personality Quiz Shortcode
Description: A simple shortcode-based personality quiz with result explanations and AdSense-ready layout.
Version: 1.0
Author: YourName
*/

function ai_personality_quiz_shortcode() {
  ob_start(); ?>

  <div id="ai-quiz-container">
    <h2>What Type of Thinker Are You?</h2>
    <p>Answer 5 questions to discover your thinking style!</p>

    <div class="ad-box">[Ad Here - Top]</div>

    <form id="quiz-form">
      <?php
      $questions = [
        ["q1", "How do you solve problems?", ["logical" => "Logical thinking", "creative" => "Creative approach"]],
        ["q2", "What's your ideal weekend?", ["logical" => "Reading or planning", "creative" => "Painting or exploring"]],
        ["q3", "How do you make decisions?", ["logical" => "Based on facts", "creative" => "Based on feelings"]],
        ["q4", "What do you prefer?", ["logical" => "Organizing tasks", "creative" => "Exploring ideas"]],
        ["q5", "Which describes you better?", ["logical" => "Structured & Focused", "creative" => "Imaginative & Open"]]
      ];

      foreach ($questions as $index => $q) {
        echo '<div class="quiz-step" style="display:' . ($index == 0 ? 'block' : 'none') . '">';
        echo '<div class="question"><strong>' . ($index+1) . '. ' . $q[1] . '</strong></div>';
        echo '<div class="answers">';
        foreach ($q[2] as $value => $label) {
          echo '<label><input type="radio" name="' . $q[0] . '" value="' . $value . '"> ' . $label . '</label>';
        }
        echo '</div></div>';
      }
      ?>

      <button type="button" id="next-btn">Next</button>
    </form>

    <div id="result"></div>
    <div class="ad-box">[Ad Here - Bottom]</div>
  </div>

  <style>
    #ai-quiz-container { font-family: sans-serif; max-width: 600px; margin: auto; padding: 20px; }
    .question { font-size: 1.1em; margin: 10px 0; }
    .answers label { display: block; margin: 8px 0; padding: 8px; background: #f1f1f1; border-radius: 6px; cursor: pointer; }
    button { margin-top: 15px; padding: 10px 20px; background: #0073aa; color: #fff; border: none; border-radius: 4px; }
    .ad-box { margin: 20px 0; text-align: center; background: #eee; padding: 10px; }
    #result { font-weight: bold; margin-top: 20px; font-size: 1.2em; }
  </style>

  <script>
    document.addEventListener("DOMContentLoaded", function() {
      const steps = document.querySelectorAll(".quiz-step");
      let currentStep = 0;

      document.getElementById("next-btn").addEventListener("click", () => {
        const currentInputs = steps[currentStep].querySelectorAll("input[type='radio']");
        const answered = Array.from(currentInputs).some(input => input.checked);

        if (!answered) {
          alert("Please select an answer.");
          return;
        }

        steps[currentStep].style.display = "none";
        currentStep++;

        if (currentStep < steps.length) {
          steps[currentStep].style.display = "block";
        } else {
          showResult();
        }
      });

      function showResult() {
        document.getElementById("quiz-form").style.display = "none";
        const values = Array.from(document.querySelectorAll("input[type='radio']:checked"))
          .map(input => input.value);

        const score = values.reduce((acc, val) => {
          acc[val] = (acc[val] || 0) + 1;
          return acc;
        }, {});

        let resultText = "";
        if ((score.logical || 0) > (score.creative || 0)) {
          resultText = "🧠 <b>You are a Logical Thinker!</b><br>You think analytically, love structure, and plan ahead.";
        } else {
          resultText = "🎨 <b>You are a Creative Thinker!</b><br>You’re imaginative, abstract, and love exploring new ideas.";
        }

        document.getElementById("result").innerHTML = resultText;
      }
    });
  </script>

<?php
  return ob_get_clean();
}

add_shortcode('ai_personality_quiz', 'ai_personality_quiz_shortcode');