fork download 
  1. import { useState } from "react";
  2. import { Button } from "@/components/ui/button";
  3.  
  4. const questions = [
  5.   {
  6.     text: "เมื่อคุณเจอหัวข้อการลงทุนใหม่ที่กำลังเป็นกระแส คุณจะ...",
  7.     choices: [
  8.       "ตื่นเต้น! รีบหาข้อมูลเพิ่มเติมทันที",
  9.       "จดไว้ก่อน แล้วค่อยหาเวลาไปอ่านลึกๆ",
  10.       "นึกถึงประสบการณ์คล้ายๆ ที่เคยเจอมาก่อน",
  11.       "ดูว่าน่าสนใจไหม แล้วค่อยลองวางแผนก่อนตัดสินใจ",
  12.     ],
  13.   },
  14.   {
  15.     text: "วิธีเรียนรู้ที่คุณชอบมากที่สุดคือ...",
  16.     choices: [
  17.       "ดูคลิปหรือเข้าร่วมเวิร์คช็อปที่สนุกๆ",
  18.       "อ่านหนังสือหรือบทความด้วยตัวเองเงียบๆ",
  19.       "ฟังเรื่องราวจากคนที่เคยผ่านมาก่อน",
  20.       "ทำตามแผนหรือขั้นตอนที่ชัดเจน พร้อมจดไว้เสมอ",
  21.     ],
  22.   },
  23.   {
  24.     text: "ถ้าเพื่อนอยากลงทุนแต่ไม่รู้จะเริ่มยังไง คุณจะ...",
  25.     choices: [
  26.       "แนะนำแอปหรือช่องที่กำลังฮิตให้ดู",
  27.       "ส่งลิงก์บทความดีๆ ให้แล้วให้เพื่อนศึกษาเอง",
  28.       "เล่าให้ฟังว่าตัวเองเคยเจออะไรมาบ้าง",
  29.       "ช่วยวางแผนให้เป็นขั้นตอนแบบเข้าใจง่าย",
  30.     ],
  31.   },
  32.   {
  33.     text: "คุณรู้สึกสนุกเมื่อ...",
  34.     choices: [
  35.       "ได้แชร์ไอเดียกับคนอื่นในกิจกรรม",
  36.       "ได้วางแผนเก็บเงินอย่างเป็นระบบ",
  37.       "ได้ลองใช้โปรแกรมจำลองลงทุน",
  38.       "ได้นั่งคุยแลกเปลี่ยนกับเพื่อนนักลงทุน",
  39.     ],
  40.   },
  41.   {
  42.     text: "เวลาคุณตัดสินใจเรื่องเงิน คุณมักจะ...",
  43.     choices: [
  44.       "ทำทันที ถ้ารู้สึกว่ามันน่าสนใจ",
  45.       "คิดวิเคราะห์ข้อมูลก่อนอย่างละเอียด",
  46.       "พิจารณาจากประสบการณ์ที่ผ่านมา",
  47.       "วางแผนและประเมินความเสี่ยงทุกครั้ง",
  48.     ],
  49.   },
  50.   {
  51.     text: "ถ้ามีโอกาสได้ลองอะไรใหม่ๆ ในการลงทุน คุณจะ...",
  52.     choices: [
  53.       "โดดเข้าไปลองเลย สนุกดี!",
  54.       "ขอเวลาศึกษาก่อน ค่อยลงมือ",
  55.       "เทียบกับสิ่งที่เคยเจอมา แล้วค่อยตัดสินใจ",
  56.       "ดูว่าสอดคล้องกับแผนระยะยาวไหมก่อนเสมอ",
  57.     ],
  58.   },
  59. ];
  60.  
  61. const results = {
  62.   A: "น้องใหม่ไฟแรง",
  63.   B: "พี่ใหญ่ใจเย็น",
  64.   C: "นักสังเกตการณ์มากประสบการณ์",
  65.   D: "นักวางแผนมั่นคง",
  66. };
  67.  
  68. export default function Quiz() {
  69.   const [answers, setAnswers] = useState(Array(questions.length).fill(null));
  70.   const [showResult, setShowResult] = useState(false);
  71.  
  72.   const handleAnswer = (qIndex, choiceIndex) => {
  73.     const newAnswers = [...answers];
  74.     newAnswers[qIndex] = ["A", "B", "C", "D"][choiceIndex];
  75.     setAnswers(newAnswers);
  76.   };
  77.  
  78.   const calculateResult = () => {
  79.     const count = { A: 0, B: 0, C: 0, D: 0 };
  80.     answers.forEach((a) => { if (a) count[a] += 1; });
  81.     const max = Object.entries(count).sort((a, b) => b[1] - a[1])[0][0];
  82.     return results[max];
  83.   };
  84.  
  85.   return (
  86.     <div className="p-4 max-w-2xl mx-auto space-y-6">
  87.       <h1 className="text-2xl font-bold">แบบทดสอบคาแรกเตอร์นักลงทุน</h1>
  88.       {questions.map((q, i) => (
  89.         <div key={i} className="p-4 border rounded-xl">
  90.           <p className="font-semibold">{i + 1}. {q.text}</p>
  91.           <div className="grid grid-cols-1 gap-2 mt-2">
  92.             {q.choices.map((c, j) => (
  93.               <Button
  94.                 key={j}
  95.                 variant={answers[i] === ["A", "B", "C", "D"][j] ? "default" : "outline"}
  96.                 onClick={() => handleAnswer(i, j)}
  97.               >
  98.                 {c}
  99.               </Button>
  100.             ))}
  101.           </div>
  102.         </div>
  103.       ))}
  104.  
  105.       <Button
  106.         className="w-full"
  107.         onClick={() => setShowResult(true)}
  108.         disabled={answers.includes(null)}
  109.       >
  110.         ดูผลลัพธ์
  111.       </Button>
  112.  
  113.       {showResult && (
  114.         <div className="p-4 bg-green-100 rounded-xl text-center">
  115.           <p className="text-lg font-semibold">คุณคือ: <span className="text-green-700">{calculateResult()}</span></p>
  116.         </div>
  117.       )}
  118.     </div>
  119.   );
  120. }
Success #stdin #stdout 0.03s 25512KB
comments (?)
stdin 
Standard input is empty
stdout 
import { useState } from "react";
import { Button } from "@/components/ui/button";

const questions = [
  {
    text: "เมื่อคุณเจอหัวข้อการลงทุนใหม่ที่กำลังเป็นกระแส คุณจะ...",
    choices: [
      "ตื่นเต้น! รีบหาข้อมูลเพิ่มเติมทันที",
      "จดไว้ก่อน แล้วค่อยหาเวลาไปอ่านลึกๆ",
      "นึกถึงประสบการณ์คล้ายๆ ที่เคยเจอมาก่อน",
      "ดูว่าน่าสนใจไหม แล้วค่อยลองวางแผนก่อนตัดสินใจ",
    ],
  },
  {
    text: "วิธีเรียนรู้ที่คุณชอบมากที่สุดคือ...",
    choices: [
      "ดูคลิปหรือเข้าร่วมเวิร์คช็อปที่สนุกๆ",
      "อ่านหนังสือหรือบทความด้วยตัวเองเงียบๆ",
      "ฟังเรื่องราวจากคนที่เคยผ่านมาก่อน",
      "ทำตามแผนหรือขั้นตอนที่ชัดเจน พร้อมจดไว้เสมอ",
    ],
  },
  {
    text: "ถ้าเพื่อนอยากลงทุนแต่ไม่รู้จะเริ่มยังไง คุณจะ...",
    choices: [
      "แนะนำแอปหรือช่องที่กำลังฮิตให้ดู",
      "ส่งลิงก์บทความดีๆ ให้แล้วให้เพื่อนศึกษาเอง",
      "เล่าให้ฟังว่าตัวเองเคยเจออะไรมาบ้าง",
      "ช่วยวางแผนให้เป็นขั้นตอนแบบเข้าใจง่าย",
    ],
  },
  {
    text: "คุณรู้สึกสนุกเมื่อ...",
    choices: [
      "ได้แชร์ไอเดียกับคนอื่นในกิจกรรม",
      "ได้วางแผนเก็บเงินอย่างเป็นระบบ",
      "ได้ลองใช้โปรแกรมจำลองลงทุน",
      "ได้นั่งคุยแลกเปลี่ยนกับเพื่อนนักลงทุน",
    ],
  },
  {
    text: "เวลาคุณตัดสินใจเรื่องเงิน คุณมักจะ...",
    choices: [
      "ทำทันที ถ้ารู้สึกว่ามันน่าสนใจ",
      "คิดวิเคราะห์ข้อมูลก่อนอย่างละเอียด",
      "พิจารณาจากประสบการณ์ที่ผ่านมา",
      "วางแผนและประเมินความเสี่ยงทุกครั้ง",
    ],
  },
  {
    text: "ถ้ามีโอกาสได้ลองอะไรใหม่ๆ ในการลงทุน คุณจะ...",
    choices: [
      "โดดเข้าไปลองเลย สนุกดี!",
      "ขอเวลาศึกษาก่อน ค่อยลงมือ",
      "เทียบกับสิ่งที่เคยเจอมา แล้วค่อยตัดสินใจ",
      "ดูว่าสอดคล้องกับแผนระยะยาวไหมก่อนเสมอ",
    ],
  },
];

const results = {
  A: "น้องใหม่ไฟแรง",
  B: "พี่ใหญ่ใจเย็น",
  C: "นักสังเกตการณ์มากประสบการณ์",
  D: "นักวางแผนมั่นคง",
};

export default function Quiz() {
  const [answers, setAnswers] = useState(Array(questions.length).fill(null));
  const [showResult, setShowResult] = useState(false);

  const handleAnswer = (qIndex, choiceIndex) => {
    const newAnswers = [...answers];
    newAnswers[qIndex] = ["A", "B", "C", "D"][choiceIndex];
    setAnswers(newAnswers);
  };

  const calculateResult = () => {
    const count = { A: 0, B: 0, C: 0, D: 0 };
    answers.forEach((a) => { if (a) count[a] += 1; });
    const max = Object.entries(count).sort((a, b) => b[1] - a[1])[0][0];
    return results[max];
  };

  return (
    <div className="p-4 max-w-2xl mx-auto space-y-6">
      <h1 className="text-2xl font-bold">แบบทดสอบคาแรกเตอร์นักลงทุน</h1>
      {questions.map((q, i) => (
        <div key={i} className="p-4 border rounded-xl">
          <p className="font-semibold">{i + 1}. {q.text}</p>
          <div className="grid grid-cols-1 gap-2 mt-2">
            {q.choices.map((c, j) => (
              <Button
                key={j}
                variant={answers[i] === ["A", "B", "C", "D"][j] ? "default" : "outline"}
                onClick={() => handleAnswer(i, j)}
              >
                {c}
              </Button>
            ))}
          </div>
        </div>
      ))}

      <Button
        className="w-full"
        onClick={() => setShowResult(true)}
        disabled={answers.includes(null)}
      >
        ดูผลลัพธ์
      </Button>

      {showResult && (
        <div className="p-4 bg-green-100 rounded-xl text-center">
          <p className="text-lg font-semibold">คุณคือ: <span className="text-green-700">{calculateResult()}</span></p>
        </div>
      )}
    </div>
  );
}
https://ideone.com/9A93VQ
language:
PHP (php 7.3.5)
created:
11 days ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!