تمرین برنامه نویسی؛ با کدبزن!

منبع جامع سوالات و تمرینات برنامه نویسی

سوالات متداول

آسان 213/ دانلود 291 بازدید

با استفاده از html و css و جاوا اسکریپت صفحه ای مربوط به سوالات متداول طراحی کنید

در این صفحه باید سوالات متداول نمایش داده شود و وقتی کاربر روی هر سوال کلیک کرد، پاسخ مربوط به آن سوال دقیقا زیر سوال با یک انیمیشن (کشویی) نمایش داده شود

👨‍💻 13 ساعت قبل کاربر ناشناس این تمرین رو مشاهده کرد

4 جواب

<!DOCTYPE html>

<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>سوالات متداول</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>سوالات متداول</h1>
        <div class="faq-item">
            <div class="faq-question">سوال ۱: چگونه می‌توانم ثبت‌نام کنم؟</div>
            <div class="faq-answer">پاسخ: برای ثبت‌نام، به صفحه ثبت‌نام مراجعه کنید و فرم را پر کنید.</div>
        </div>
        <div class="faq-item">
            <div class="faq-question">سوال ۲: چگونه می‌توانم رمز عبور خود را بازیابی کنم؟</div>
            <div class="faq-answer">پاسخ: روی گزینه "فراموشی رمز عبور" کلیک کنید و دستورالعمل‌ها را دنبال کنید.</div>
        </div>
        <div class="faq-item">
            <div class="faq-question">سوال ۳: آیا می‌توانم حساب کاربری خود را حذف کنم؟</div>
            <div class="faq-answer">پاسخ: بله، می‌توانید از بخش تنظیمات حساب کاربری خود، حساب را حذف کنید.</div>
        </div>
        <!-- سوالات بیشتر -->
    </div>
    <script src="script.js"></script>
</body>
</html>

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 600px;
    margin: auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

h1 {
    text-align: center;
    color: #333;
}

.faq-item {
    margin-bottom: 10px;
}

.faq-question {
    background-color: #007bff;
    color: white;
    padding: 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.faq-question:hover {
    background-color: #0056b3;
}

.faq-answer {
    display: none;
    padding: 10px;
    border: 1px solid #007bff;
    border-radius: 5px;
    margin-top: 5px;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

document.querySelectorAll('.faq-question').forEach(question => {
    question.addEventListener('click', () => {
        const answer = question.nextElementSibling;

        // Toggle the display of the answer
        if (answer.style.maxHeight) {
            answer.style.maxHeight = null;
            answer.style.padding = '0';
            answer.style.display = 'none';
        } else {
            answer.style.maxHeight = answer.scrollHeight + "px";
            answer.style.padding = '10px';
            answer.style.display = 'block';
        }
    });
});
کاربر 136 دانلود HTML & CSS 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile Layout</title>
    <link href="https://fonts.googleapis.com/css2?family=Audiowide&family=Electrolize&display=swap" rel="stylesheet">
    <style>
      #questions{
        background: #e6e9ee;
        border-radius: 10px;
        padding-bottom: 20px;
        margin: 30px;
      }
      
      #questions h1{
        font-family: "Anton", sans-serif;
        padding: 40px;
        padding-bottom: 0;
        color: #f77f00;  
      }
      
      #questions section{
        background: #ffffff;
        margin: 40px;
        overflow: hidden;
        border-radius: 20px;
        box-shadow: 2px 10px 10px #cccccc;
        transition: height 0.5s ease
      }
      
      
      #questions h4{
        margin: 0;
        padding: 20px;
        color:#264653;
        transition: color 0.5s
      }

      #questions p{
        margin: 0;
        padding: 20px;
        padding-top: 0;
        color: #606060;
      }

  </style>
</head>
<body>
  <section id="questions">
    <h1>Frequently Asked Questions</h1>

    <section onclick="showAnswer(this)">
      <h4>How can I track my order?</h4>
      <p>To track your order, log in to your account and go to the "My Orders" section. Here you can view the status of your order.</p>
    </section>
    
    <section onclick="showAnswer(this)">
      <h4>What payment methods are available in your store?	</h4>
      <p>We accept various payment methods including credit and debit cards, online payment, and cash on delivery.</p>
    </section>
    
    <section onclick="showAnswer(this)">
      <h4>Can I cancel my order?</h4>
      <p>Yes, you can cancel your order as long as it has not been shipped. To cancel, go to the "My Orders" section in your account and select the cancel option.</p>
    </section>
    
    <section onclick="showAnswer(this)">
      <h4>How can I return a product?</h4>
      <p>To return a product, log in to your account and request a return. We will send you instructions on how to return the product.</p>
    </section>
    
    <section onclick="showAnswer(this)">
      <h4>What is the delivery time for orders?</h4>
      <p>The delivery time for orders is usually between 3 to 7 business days. You can track the exact delivery status from the "My Orders" section.</p>
    
    </section>
  </section>
<script>
  let section=document.querySelectorAll("#questions section")
  
  section.forEach(element => {
    let h4 = element.querySelector("h4")
    element.style.height=`${h4.scrollHeight}px`}
  )
  
  function showAnswer(element){
    let h4 = element.querySelector("h4")
    let p = element.querySelector("p")
    
    if(element.style.height==`${h4.scrollHeight}px`){
      element.style.height = `${h4.scrollHeight + p.scrollHeight}px`;
      element.style.borderWidth = "3px 3px";
      element.style.borderStyle = "solid dashed";
      element.style.borderColor = "#2a9d8f"
      h4.style.color = "#2a9d8f" 
    }
    else{
      element.style.height=`${h4.scrollHeight}px`

      element.style.border ="none" 
      h4.style.color = "#264653"
    }
  }
</script>
</body>
</html>
Unun..ali..nunu دانلود JavaScript HTML & CSS

کد اول Unun..ali..nunu 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Frequently Asked Questions</title>
    <!--                    این کد اصلاح شده کد اول میباشد
    در کد اول وقتی بعد از لود سایت اندازه صفحه مرور گر را تغییر میدادیم
                 ارتفاع بخش سوالات تغییر نمیکرد وباعث خراب شدن کل کد میشد        -->
    <link href="https://fonts.googleapis.com/css2?family=Audiowide&family=Electrolize&display=swap" rel="stylesheet">
 
    <style>
      /* ---------------------------------------------------------------------------- */
      section{
        background: #e6e9ee;
        border-radius: 10px;
        padding-bottom: 20px;
        margin: 30px;
        }

      section h1{
        font-family: "Anton", sans-serif;
        padding: 40px;
        padding-bottom: 0;
        color: #f77f00;  
        }
      /* ---------------------------------------------------------------------------- */
      .close , .open{
        background: #ffffff;
        margin: 40px;
        overflow: hidden;
        border-radius: 20px;
        box-shadow: 2px 10px 10px #cccccc;
        }
      .open{
        border-width: 3px 3px ;
        border-style: solid dashed;
        border-color: #2a9d8f;
        }
      /* ----------------------- */
      .close h4 , .open h4{
        margin: 0;
        padding: 20px;
        transition: color 0.5s ease;
        }
      .close h4{
        color:#264653;}
      .open h4{
        color:#2a9d8f;}
      /* ----------------------- */
      .open p , .close p{
          margin: 0;
          padding-left: 20px;
          color: #606060;
          transition: height 0.5s ease;
          }
       .close p{
          height: 0 !important;}
      /* ----------------------- */
  </style>
</head>

<body>
  <section>
    <h1>Frequently Asked Questions</h1>
 
    <div class="close" onclick="showAnswer(this)">
      <h4>How can I track my order?</h4>
      <p>To track your order, log brin to your account and go to the "My Orders" div. Here you can view the status of your order.</p>
    </div>
    
    <div class="close" onclick="showAnswer(this)">
      <h4>What payment methods are available in your store?	</h4>
      <p>We accept various payment methods including credit and debit cards, online payment, and cash on delivery.</p>
    </div>
    
    <div class="close" onclick="showAnswer(this)">
      <h4>Can I cancel my order?</h4>
      <p>Yes, you can cancel your order as long as it has not been shipped. To cancel, go to the "My Orders" div in your account and select the cancel option.</p>
    </div>
    
    <div class="close" onclick="showAnswer(this)">
      <h4>How can I return a product?</h4>
      <p>To return a product, log in to your account and request a return. We will send you instructions on how to return the product.</p>
    </div>
    
    <div class="close" onclick="showAnswer(this)">
      <h4>What is the delivery time for orders?</h4>
      <p>The delivery time for orders is usually between 3 to 7 business days. You can track the exact delivery status from the "My Orders" div.</p>
    </div>
  </section>
<script>   
  function showAnswer(element){
    let p = element.querySelector("p")
    if(element.classList.contains("close")){
        let height = p.scrollHeight + 20 + "px"; 
        p.style.height = height;
        element.classList.remove("close");
        element.classList.add("open")}
    else{
        element.classList.remove("open")
        element.classList.add("close")}
  }
</script>
</body>
</html>
Unun..ali..nunu دانلود JavaScript HTML & CSS

کد دوم. این کد اصلاح شده کد اول میباشد در کد اول وقتی بعد از لود سایت اندازه صفحه مرور گر را تغییر میدادیم ارتفاع بخش سوالات تغییر نمیکرد وباعث خراب شدن کل کد میشد Unun..ali..nunu 

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>سوالات متداول</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>سوالات متداول</h1>
        <div class="faq-item">
            <div class="faq-question" onclick="toggleAnswer(this)">
                سوال ۱: چگونه می‌توانم ثبت‌نام کنم؟
            </div>
            <div class="faq-answer">
                برای ثبت‌نام، کافیست به صفحه ثبت‌نام مراجعه کنید و فرم را پر کنید.
            </div>
        </div>
        <div class="faq-item">
            <div class="faq-question" onclick="toggleAnswer(this)">
                سوال ۲: چگونه می‌توانم رمز عبور خود را بازیابی کنم؟
            </div>
            <div class="faq-answer">
                برای بازیابی رمز عبور، به صفحه ورود مراجعه کنید و گزینه "بازیابی رمز عبور" را انتخاب کنید.
            </div>
        </div>
        <div class="faq-item">
            <div class="faq-question" onclick="toggleAnswer(this)">
                سوال ۳: آیا امکان تغییر اطلاعات حساب وجود دارد؟
            </div>
            <div class="faq-answer">
                بله، شما می‌توانید با ورود به حساب کاربری خود، اطلاعات خود را تغییر دهید.
            </div>
        </div>
        <!-- سوالات بیشتر می‌توانند در اینجا اضافه شوند -->
    </div>
    <script src="script.js"></script>
</body>
</html>
CSS (styles.css)
css
body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 600px;
    margin: auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
}

.faq-item {
    margin-bottom: 10px;
}

.faq-question {
    background-color: #007BFF;
    color: white;
    padding: 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.faq-question:hover {
    background-color: #0056b3;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background-color: #f1f1f1;
    padding: 0 15px;
    border-radius: 0 0 5px 5px;
    margin-top: 5px;
}

JavaScript (script.js)
javascript
function toggleAnswer(questionElement) {
    const answerElement = questionElement.nextElementSibling;

    // بررسی اینکه آیا پاسخ فعلاً نمایش داده شده است یا خیر
    if (answerElement.style.maxHeight) {
        // اگر پاسخ نمایش داده شده، آن را مخفی کن
        answerElement.style.maxHeight = null;
    } else {
        // اگر پاسخ مخفی است، آن را نمایش بده
        answerElement.style.maxHeight = answerElement.scrollHeight + "px";
    }
}
Mma123 دانلود JavaScript HTML & CSS
<< صفحه قبل 1 صفحه بعد >>

ارسال جواب

// کداتو توی این بخش بنویس
// فرقی نمیکنه چه زبان برنامه نویسی باشه، همرو پشتیبانی میکنیم :)
// البته قبلش این سه خط رو پاک کن
  • لطفا جواب های تکراری ارسال نکن
  • قبل از ارسال، جوابت رو داخل یک کد ادیتور مثل vscode بنویس و بعد اینجا Paste کن
  • جواب های ارسالی، پس از بررسی کوتاهی، ویرایش میشن و در سایت نمایش داده میشن
  • ارسال جواب حق مادی یا معنوی برای ارسال کننده ایجاد نمیکند و تمام حقوق برای سایت کدبزن محفوظ است

تمرینات مرتبط

تشخیص با استفاده از هوش مصنوعی
×

حساب کاربری

برای استفاده از این بخش باید وارد حساب کاربریت بشی

ورود/ثبت نام
×

نمیتونم این تمرین رو حل کنم 😞

اگه متوجه تمرین نمیشی یا به هر دلیلی نمیتونی حلش کنی، کاملا طبیعیه، اشکالی نداره؛ ناراحت نشو 😊
سعی کن تمرینات آسون تر رو ببینی و جواب های مختلفی که دیگران ارسال کرده اند رو بررسی کنی و یواش یواش به سراغ تمرینات سخت تر بری. همچنین ممکنه جوابت درست باشه ولی با سایر جواب ها متفاوت باشه
اگه برنامه نویسی رو هنوز شروع نکردی یا خوب یاد نگرفتی، میتونی از طریق لینک زیر یاد بگیری

یادگیری برنامه نویسی
بستن