SSC & HSC GPA Calculator Widget with Source Code for Blogger | জিপিএ ক্যালকুলেটর তৈরি করুন

বর্তমান ডিজিটাল যুগে শিক্ষা সংক্রান্ত তথ্য এবং টুলসের চাহিদা আকাশচুম্বী। বিশেষ করে এসএসসি (SSC) এবং

এইচএসসি (HSC) পরীক্ষার পর শিক্ষার্থীরা তাদের অর্জিত গ্রেড পয়েন্ট বা জিপিএ হিসাব করার জন্য ইন্টারনেটে

নির্ভরযোগ্য ক্যালকুলেটর খুঁজে থাকে। আপনি যদি একজন ব্লগার বা ওয়েবসাইট ডেভেলপার হয়ে থাকেন, তবে

আপনার সাইটে একটি GPA Calculator উইজেট যুক্ত করা ভিজিটর ধরে রাখার অন্যতম সেরা উপায়। আজকের

এই পোস্টে আমরা আপনাদের সাথে শেয়ার করবো একটি আধুনিক এবং নির্ভুল জিপিএ ক্যালকুলেটর, যা আপনি

খুব সহজেই আপনার ব্লগারে ব্যবহার করতে পারবেন।

কেন এই জিপিএ ক্যালকুলেটরটি সেরা?

আমাদের তৈরি এই ক্যালকুলেটরটি শুধুমাত্র একটি সাধারণ টুল নয়, এটি ব্যবহারকারীদের অভিজ্ঞতার কথা মাথায়

রেখে ডিজাইন করা হয়েছে। এর বিশেষ বৈশিষ্ট্যগুলো হলো:

রেসপন্সিভ ডিজাইন: এটি মোবাইল, ট্যাবলেট এবং কম্পিউটার—সব ধরনের স্ক্রিনেই সুন্দরভাবে প্রদর্শিত হয়।

৪র্থ বিষয় (Optional Subject) যুক্ত করার সুবিধা: বাংলাদেশের শিক্ষা ব্যবস্থায় ৪র্থ বিষয়ের গুরুত্ব অনেক। এই

ক্যালকুলেটরটি স্বয়ংক্রিয়ভাবে ৪র্থ বিষয়ের অতিরিক্ত পয়েন্ট মূল জিপিএর সাথে যোগ করতে সক্ষম।

বিষয় যোগ করার স্বাধীনতা: ব্যবহারকারী তার প্রয়োজন অনুযায়ী যতো খুশি বিষয় যুক্ত করতে পারেন।

ডার্ক মোড ইন্টারফেস: এর আধুনিক ডার্ক থিম আপনার ওয়েবসাইটের সৌন্দর্য আরও বাড়িয়ে দেবে।

কিভাবে আপনার ব্লগারে এটি সেটআপ করবেন?

আপনার ব্লগারে এই উইজেটটি যুক্ত করা অত্যন্ত সহজ। নিচে দেওয়া ধাপগুলো অনুসরণ করুন:

১. আপনার ব্লগার ড্যাশবোর্ড থেকে Layout অথবা সরাসরি Post Editor-এ যান।

২. যেখানে ক্যালকুলেটরটি দেখাতে চান সেখানে একটি HTML/JavaScript গ্যাজেট নিন।

৩. নিচের বক্সে দেওয়া সম্পূর্ণ কোডটি কপি করে সেখানে পেস্ট করে দিন।

৪. সেভ করুন এবং আপনার সাইটটি ভিউ করে দেখুন।

শিক্ষার্থীদের জন্য ব্যবহারের নিয়ম:

এই টুলটি ব্যবহার করা খুবই সহজ। শিক্ষার্থীকে প্রথমে তার বিষয়ের নাম (যেমন: বাংলা, ইংরেজি) এবং এরপর সেই

বিষয়ে প্রাপ্ত গ্রেড (যেমন: A+, A) ড্রপ-ডাউন থেকে সিলেক্ট করতে হবে। যদি কোনো শিক্ষার্থী তার ৪র্থ বিষয়ের

পয়েন্ট যোগ করতে চায়, তবে সে নির্দিষ্ট অপশনটি ব্যবহার করে সহজেই তা করতে পারবে। সব শেষে "ফলাফল

দেখুন" বাটনে ক্লিক করলেই নির্ভুল জিপিএ স্ক্রিনে ভেসে উঠবে।

এটি কিভাবে ব্যবহার করবেন জানতে পুরো ভিডিওটি দেখুন -

GPA ক্যালকুলেটর (SSC/HSC)

নিচে GPA Calculator-এর সম্পূর্ণ HTML কোডটি দেওয়া হলো:

<!-- Ash Color GPA Calculator Widget -->
<style>
  @import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600&display=swap');

  /* মূল কন্টেইনার */
  .gpa-widget {
    background-color: #2c2c2c; /* ডার্ক ব্যাকগ্রাউন্ড */
    color: #e0e0e0; /* হালকা ছাই টেক্সট */
    padding: 15px;
    border-radius: 8px;
    font-family: 'Hind Siliguri', sans-serif;
    border: 1px solid #444;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    max-width: 100%;
  }

  /* শিরোনাম */
  .gp-title {
    text-align: center;
    color: #b0bec5; /* লাইট অ্যাশ কালার */
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
    border-bottom: 1px solid #555;
    padding-bottom: 8px;
  }

  /* সাবজেক্ট লিস্ট এরিয়া */
  .sub-list {
    max-height: 250px;
    overflow-y: auto;
    margin-bottom: 10px;
    padding-right: 5px;
  }

  /* স্ক্রলবার ডিজাইন (অ্যাশ কালার) */
  .sub-list::-webkit-scrollbar { width: 6px; }
  .sub-list::-webkit-scrollbar-thumb { background: #757575; border-radius: 3px; }

  /* প্রতিটি সাবজেক্ট রো */
  .sub-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    background: #3a3a3a;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #444;
  }

  .sub-label {
    font-size: 14px;
    color: #ccc; /* টেক্সট কালার */
    flex: 1;
  }

  /* গ্রেড ড্রপডাউন */
  .grade-select {
    width: 80px;
    padding: 5px;
    background: #222;
    color: #fff;
    border: 1px solid #555;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
  }
  
  .grade-select:focus { border-color: #90a4ae; } /* ফোকাস কালার */

  /* বাটন গ্রুপ */
  .btn-group {
    display: flex;
    gap: 10px;
    margin-top: 10px;
  }

  .gp-btn {
    flex: 1;
    padding: 10px;
    border: none;
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Hind Siliguri', sans-serif;
    transition: 0.3s;
  }

  /* ক্যালকুলেট বাটন (অ্যাশ কালার) */
  .btn-calc {
    background: #607d8b; /* ব্লু-গ্রে / অ্যাশ */
    color: #fff;
  }
  .btn-calc:hover { background: #546e7a; } /* হোভার কালার */

  /* অ্যাড বাটন (ডার্ক গ্রে) */
  .btn-add {
    background: #424242;
    color: #ccc;
    border: 1px solid #555;
  }
  .btn-add:hover { background: #616161; color: #fff; }

  /* ফলাফল বক্স */
  .res-box {
    margin-top: 15px;
    text-align: center;
    background: #263238; /* ভেরি ডার্ক অ্যাশ */
    padding: 15px;
    border-radius: 5px;
    border: 1px dashed #78909c;
    display: none; /* প্রথমে লুকানো */
  }

  .res-title { font-size: 14px; color: #b0bec5; }
  
  .res-gpa {
    font-size: 32px;
    font-weight: bold;
    color: #eceff1; /* সাদাটে অ্যাশ */
    margin: 5px 0;
  }

  .res-grade {
    font-size: 16px;
    color: #cfd8dc;
    font-weight: 500;
  }

  /* অপশনাল সাবজেক্ট চেকবক্স */
  .opt-check {
    margin-top: 10px;
    font-size: 13px;
    color: #b0bec5;
    display: flex;
    align-items: center;
    gap: 5px;
  }
</style>

<div class="gpa-widget">
  <div class="gp-title">GPA ক্যালকুলেটর (SSC/HSC)</div>

  <div id="subjectList" class="sub-list">
    <!-- সাবজেক্ট ১-৬ অটো জেনারেট হবে -->
  </div>

  <div class="opt-check">
    <input type="checkbox" id="hasOptional" onchange="toggleOptional()" /> 
    <label for="hasOptional">৪র্থ বিষয় (Optional Subject) আছে?</label>
  </div>

  <div id="optionalBox" style="display:none; margin-top:8px;" class="sub-row">
    <span class="sub-label" style="color:#b0bec5">৪র্থ বিষয় (Optional):</span>
    <select class="grade-select" id="optGrade">
      <option value="0" />Select
      <option value="5.00" />A+
      <option value="4.00" />A
      <option value="3.50" />A-
      <option value="3.00" />B
      <option value="2.00" />C
      <option value="1.00" />D
      <option value="0.00" />F
    </select>
  </div>

  <div class="btn-group">
    <button class="gp-btn btn-add" onclick="addSubject()">+ বিষয় যোগ করুন</button>
    <button class="gp-btn btn-calc" onclick="calculateGPA()">ফলাফল দেখুন</button>
  </div>

  <!-- ফলাফল -->
  <div id="resultBox" class="res-box">
    <div class="res-title">আপনার জিপিএ (Your GPA)</div>
    <div id="finalGPA" class="res-gpa">0.00</div>
    <div id="finalGrade" class="res-grade">Grade: F</div>
  </div>
</div>

<script>
  let subjectCount = 0;

  // গ্রেড লিস্ট (ফাংশন এর বাইরে গ্লোবাল ভেরিয়েবল)
  const gradeOptions = `
    <option value="0">Select</option>
    <option value="5.00">A+ (5.00)</option>
    <option value="4.00">A (4.00)</option>
    <option value="3.50">A- (3.50)</option>
    <option value="3.00">B (3.00)</option>
    <option value="2.00">C (2.00)</option>
    <option value="1.00">D (1.00)</option>
    <option value="0.00">F (0.00)</option>
  `;

  // পেজ লোড হলে ৬টি সাবজেক্ট তৈরি হবে
  window.onload = function() {
    for(let i=0; i<6; i++) {
      addSubject();
    }
  };

  function addSubject() {
    subjectCount++;
    const container = document.getElementById('subjectList');
    
    const div = document.createElement('div');
    div.className = 'sub-row';
    div.innerHTML = `
      <span class="sub-label">বিষয় ${subjectCount}</span>
      <select class="grade-select main-sub">
        ${gradeOptions}
      </select>
    `;
    container.appendChild(div);
    
    // অটো স্ক্রল করে নিচে নামানো
    container.scrollTop = container.scrollHeight;
  }

  function toggleOptional() {
    const box = document.getElementById('optionalBox');
    const check = document.getElementById('hasOptional');
    box.style.display = check.checked ? 'flex' : 'none';
  }

  function calculateGPA() {
    let totalPoints = 0;
    let totalSubjects = 0;
    let failCount = 0;

    // মেইন সাবজেক্টের পয়েন্ট হিসাব
    const subjects = document.querySelectorAll('.main-sub');
    subjects.forEach(select => {
      const point = parseFloat(select.value);
      if (point === 0 && select.options[select.selectedIndex].text.includes("F")) {
        failCount++;
      }
      if (point > 0 || select.value !== "0") { // যদি সিলেক্ট করা থাকে
        totalPoints += point;
        totalSubjects++;
      }
    });

    if (totalSubjects === 0) {
      alert("অনুগ্রহ করে অন্তত একটি বিষয়ের গ্রেড সিলেক্ট করুন!");
      return;
    }

    // যদি কোনো সাবজেক্টে ফেল থাকে তবে জিপিএ ০.০০
    if (failCount > 0) {
      showResult(0.00, "F (Fail)");
      return;
    }

    // অপশনাল সাবজেক্টের হিসাব (৩.০০ এর বেশি পয়েন্ট যোগ হবে না, নিয়ম অনুযায়ী ২.০০ মাইনাস হবে)
    const hasOpt = document.getElementById('hasOptional').checked;
    if (hasOpt) {
      const optPoint = parseFloat(document.getElementById('optGrade').value);
      if (optPoint >= 2.00) {
        const extraPoint = optPoint - 2.00;
        totalPoints += extraPoint;
      }
    }

    // জিপিএ বের করা
    let gpa = totalPoints / totalSubjects;
    
    // ৫.০০ এর বেশি হতে পারবে না
    if (gpa > 5.00) gpa = 5.00;

    // গ্রেড বের করা
    let grade = "";
    if (gpa === 5.00) grade = "A+ (Excellent)";
    else if (gpa >= 4.00) grade = "A (Very Good)";
    else if (gpa >= 3.50) grade = "A- (Good)";
    else if (gpa >= 3.00) grade = "B (Satisfactory)";
    else if (gpa >= 2.00) grade = "C (Pass)";
    else if (gpa >= 1.00) grade = "D (Pass)";
    else grade = "F (Fail)";

    showResult(gpa.toFixed(2), grade);
  }

  function showResult(gpa, grade) {
    const resBox = document.getElementById('resultBox');
    document.getElementById('finalGPA').innerText = gpa;
    document.getElementById('finalGrade').innerText = "Grade: " + grade;
    
    resBox.style.display = 'block';
    resBox.scrollIntoView({behavior: "smooth"});
  }
</script>

বি.দ্র.: নিচে দেওয়া কোডটি কপি করে আপনার ওয়েবসাইটের HTML সেকশনে পেস্ট করুন।

SSC & HSC GPA Calculator Widget with Source Code for Blogger | জিপিএ ক্যালকুলেটর তৈরি করুন

কেন এই জিপিএ ক্যালকুলেটরটি সেরা?

কিভাবে আপনার ব্লগারে এটি সেটআপ করবেন?

শিক্ষার্থীদের জন্য ব্যবহারের নিয়ম:

Post a Comment

Follow Us

টাকা ০.০০

نموذج الاتصال