یک تولید رندوم سوال چیستان با HTML، CSS و JavaScript ایجاد کنید

سه شنبه, ۲۲ اسفند ۱۴۰۲، ۱۱:۴۸ ب.ظ

با این آموزش گام به گام، نحوه ساختن یک مولد معما با استفاده از HTML، CSS و جاوا اسکریپت را بیاموزید. برای پیاده سازی و سفارشی سازی آسان آموزش ما را دنبال کنید.

مولد معماها افزودنی لذت بخش به وب سایت ها هستند و یک عنصر تعاملی را اضافه می کنند که کاربران در هر سنی را مجذوب خود می کند. در این آموزش، شما را از طریق فرآیند ایجاد معماهای خود با استفاده از HTML، CSS و جاوا اسکریپت راهنمایی می کنیم. چه به دنبال سرگرم کردن بازدیدکنندگان یا ارتقاء پلتفرم های آموزشی باشید، این راهنمای گام به گام شما را با مهارت هایی برای ایجاد یک تجربه جذاب که تأثیری ماندگار بر جای می گذارد، مجهز می کند. بیایید شیرجه بزنیم و رمز و راز ساختن ژنراتور معماهای خود را باز کنیم!

کد HTML :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Riddle Generator</title>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Riddle Generator</h1>
    <div class="riddle">
      <p id="riddle-text">What has keys but can't open locks?</p>
      <button id="generate-btn" class="button">Generate Riddle</button>
      <button id="answer-btn" class="button hidden">Show Answer</button>
      <p id="answer" class="hidden">Answer: A piano</p>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

کد CSS :

body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.container {
  text-align: center;
}

h1 {
  color: #333;
}

.riddle {
  background-color: #fff;
  padding: 20px;
  max-width: 600px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#riddle-text {
  font-size: 20px;
  margin-bottom: 20px;
}

#answer {
  font-size: 16px;
  margin-top: 10px;
  color: Blue;
}

.hidden {
  display: none;
}

.button {
  font-family: 'Poppins', sans-serif;
  background-color: #4caf50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  margin-right: 10px;
  animation: slideIn 0.5s ease-in-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.button:hover {
  background-color: #45a049;
}

.button:active {
  transform: translateY(3px);
}

کد JAVA.js

const riddles = [
  { question: "What has keys but can't open locks?", answer: "A piano" },
  { question: "I'm tall when I'm young, and I'm short when I'm old. What am I?", answer: "A candle" },
  { question: "What gets wetter as it dries?", answer: "A towel" },
  { question: "What has a head, a tail, is brown, and has no legs?", answer: "A penny" },
  { question: "The more you take, the more you leave behind. What am I?", answer: "Footsteps" },
  { question: "What can travel around the world while staying in a corner?", answer: "A stamp" },
  { question: "What has a neck but no head?", answer: "A bottle" },
  { question: "What comes once in a minute, twice in a moment, but never in a thousand years?", answer: "The letter 'm'" },
  { question: "What has cities but no houses, forests but no trees, and rivers but no water?", answer: "A map" },
  { question: "What belongs to you, but other people use it more than you?", answer: "Your name" },
  { question: "What is full of holes but still holds water?", answer: "A sponge" },
  { question: "What has a heart that doesn't beat?", answer: "An artichoke" },
  { question: "What can you catch but not throw?", answer: "A cold" },
  { question: "What has keys but can't open locks?", answer: "A keyboard" },
  { question: "What can you break, even if you never pick it up or touch it?", answer: "A promise" },
  { question: "What has a head, a tail, is brown, and has no legs?", answer: "A coin" },
  { question: "What is always in front of you but can't be seen?", answer: "The future" }
];

const generateRiddle = () => {
  const randomIndex = Math.floor(Math.random() * riddles.length);
  const riddleElement = document.getElementById('riddle-text');
  const answerElement = document.getElementById('answer');
  const answerBtn = document.getElementById('answer-btn');

  riddleElement.textContent = riddles[randomIndex].question;
  answerElement.textContent = `Answer: ${riddles[randomIndex].answer}`;
  answerElement.classList.add('hidden');
  answerBtn.classList.remove('hidden');
};

const toggleAnswer = () => {
  const answerElement = document.getElementById('answer');
  answerElement.classList.toggle('hidden');
};

document.getElementById('generate-btn').addEventListener('click', generateRiddle);
document.getElementById('answer-btn').addEventListener('click', toggleAnswer);

// Initial riddle generation
generateRiddle();

۰ ۰
۰۲/۱۲/۲۲

مدیر سایت

مصطفی شاه ولی

مصطفی شاه ولی

اینجا حوزه فناوری اطلاعات و ارتباطات است