एचटीएमएल/जावास्क्रिप्ट का उपयोग करते हुए यह मेरा पहला दिन है। मैंने कुछ समय पहले कुछ जावा किया है। मैं एक प्रश्नोत्तरी बनाने की कोशिश कर रहा हूं जो ड्रॉप डाउन सूची से उत्तर प्राप्त करेगा और उनकी तुलना उत्तर कुंजी से करेगा। मैंने बहुत सी चीजों की कोशिश की है मैं उन सभी को याद भी नहीं कर सकता। किसी भी सहायता की सराहना की जाएगी। विशेष रूप से, मैं यह नहीं समझ सकता कि दो सरणी में प्रत्येक तत्व की तुलना कैसे करें। मुझे यकीन है कि सरणियों की तुलना में बहुत अधिक गलत है। मैंने 4 घंटे के लिए उत्तर गुगल किए हैं और कुछ भी नहीं मिला है। यहाँ मेरा कोड अब तक है:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>Critical Device Test</h1>
<p>Please match the letter to the corresponding answer.<p>

<br>
<br>

<img src="https://i.imgur.com/kDHijRv.jpg" alt="Proton Source CD's" width = 300 height = 200>
<br>
<label for="Q1">A:</label>
<select id="Q1" class="Q">
  <option value="0">SELECT</option>
  <option value="1">L:CRDEV</option>
  <option value="2">L:CDC</option>
  <option value="3">L:LINCDC</option>
  <option value="4">L:LINAC</option>
</select>
<br>
<label for="Q2">B:</label>
<select id="Q2" class="Q">
  <option value="0">SELECT</option>
  <option value="1">n1</option>
  <option value="2">n2</option>
  <option value="3">n3</option>
  <option value="4">n4</option>
</select>
<br>
<label for="Q3">C:</label>
<select id="Q3" class="Q">
  <option value="0">SELECT</option>
  <option value="1">e1</option>
  <option value="2">e2</option>
  <option value="3">e3</option>
  <option value="4">e4</option>
</select>

<br>
<br>

<button onclick="myFunc()">Click me</button>

<script>
var q1 = document.getElementById("Q1");
var valueQ1=q1.options[q1.selectedIndex].value
var q2 = document.getElementById("Q2");
var valueQ2=q2.options[q2.selectedIndex].value
var q3 = document.getElementById("Q3");
var valueQ3=q3.options[q3.selectedIndex].value

var array ans = [1,2,3]
var array inpans = [valueQ1,valueQ2,valueQ3]
var counter = 0;
var count = 0;

function myFunc(){
    while (count<ans.length){
    if(ans[count]==inpans[count])
    {
        counter ++;
        count ++;
    }else {
        counter = counter;
        count ++,
        }
}
    document.getElementById("one").innerHTML = "You got " + counter + " right.";
}

</script>
<p id="one"></p>
</body>
</html>
0
Pdiz 21 मार्च 2020, 07:15

1 उत्तर

सबसे बढ़िया उत्तर

आपके पास कई समस्याएं हैं जिन्हें ठीक करने की आवश्यकता है:

  1. आपका एचटीएमएल अमान्य है। आप लाइन 11 पर अपना <p> टैग बंद नहीं कर रहे हैं:

    <p>Please match the letter to the corresponding answer.</p> <!-- <-- close this -->
    
  2. आपके कोड में कई वाक्यविन्यास त्रुटियां हैं। जब भी आपका कोड काम नहीं कर रहा हो, तो सबसे पहले आपको सिंटैक्स त्रुटियां देखनी चाहिए। सिंटैक्स त्रुटियों को आपके ब्राउज़र के कंसोल द्वारा पहचाना जा सकता है। पहली सिंटैक्स त्रुटियां 58 और 59 की पंक्तियों पर हैं। var कीवर्ड के बाद केवल एक चर नाम (पहचानकर्ता) होना चाहिए:

    var ans = [1, 2, 3]; // <-- used to be: var array ans
    var inpans = [valueQ1, valueQ2, valueQ3]; // used to be: array inpans
    
  3. लाइन 70 पर एक और सिंटैक्स त्रुटि होती है। यहां आप अर्ध-कॉलन के बजाय अल्पविराम का उपयोग कर रहे हैं। फिर से, कंसोल आपको इस त्रुटि को स्वयं पहचानने में मदद कर सकता है:

    count++; // used to be: count++,
    
  4. आपका अगला अंक एक तार्किक मुद्दा है। पृष्ठ लोड होने पर निम्न कोड चलता है:

    var q1 = document.getElementById("Q1");
    var valueQ1 = q1.options[q1.selectedIndex].value
    var q2 = document.getElementById("Q2");
    var valueQ2 = q2.options[q2.selectedIndex].value
    var q3 = document.getElementById("Q3");
    var valueQ3 = q3.options[q3.selectedIndex].value
    

    ... चूंकि यह तब चलता है जब पृष्ठ प्रारंभ में लोड होता है, valueQ1 आदि के मान पृष्ठ के प्रारंभ में लोड होने पर ड्रॉपडाउन का प्रारंभिक मान होंगे। जब आप ड्रॉपडाउन में चयनित मान बदलते हैं तो ये मान नहीं बदलते हैं। यदि आप वह व्यवहार चाहते हैं तो आपको एक ईवेंट श्रोता की आवश्यकता होगी। हालांकि, इसे ठीक करने का एक आसान तरीका यह है कि आप अपने फ़ंक्शन के अंदर valueQ1 से लेकर valueQ3 तक के मान सेट करें। इस तरह, जब आप अपने बटन पर क्लिक करते हैं, तो आपका कोड ड्रॉपडाउन से मानों को पकड़ लेगा, जो कि बाद होना चाहिए, उपयोगकर्ता ने मैन्युअल रूप से ड्रॉपडाउन से एक मान का चयन किया है:

    var q1 = document.getElementById("Q1");
    var q2 = document.getElementById("Q2");
    var q3 = document.getElementById("Q3");
    ...
    function myFunc() {
      // get value of dropdown elements
      var valueQ1 = q1.value; // you can just grab the dropdown's value, no need for `q1.options[q1.selectedIndex].value`
      var valueQ2 = q2.value;
      var valueQ3 = q3.value;
      var inpans = [valueQ1, valueQ2, valueQ3];
      while (count < ans.length) {
      ...
    

इन सभी को ठीक करने से आपका कोड उत्तरों के विरुद्ध जाँच कर सकेगा। वर्तमान में, जैसा कि आपका count वैरिएबल myFunc के बाहर परिभाषित है, आपका बटन केवल आपके लूप को एक बार चलाएगा (दूसरी बार जब यह count >= ans.length चलता है, जिससे आपकी लूप कंडीशन false - इस प्रकार इसके भीतर कोड नहीं चल रहा है)। यदि आप चाहते हैं कि उपयोगकर्ता किसी दिए गए प्रश्न पर एकाधिक प्रयास करें तो आप अपने फ़ंक्शन के अंदर count को परिभाषित करते हैं ताकि बटन क्लिक करने पर यह रीसेट हो जाए।

एक अतिरिक्त नोट के रूप में, यदि आप उत्पादन में इस कोड का उपयोग करने की योजना बना रहे हैं, तो ध्यान रखें कि उपयोगकर्ता आपकी वेबसाइट के स्रोत का निरीक्षण करके प्रश्नों के उत्तर देख सकेंगे।

नीचे बदला हुआ कोड देखें:

<!DOCTYPE html>
<html>

  <head>
    <title>Page Title</title>
  </head>

  <body>

    <h1>Critical Device Test</h1>
    <p>Please match the letter to the corresponding answer.</p>

    <br>
    <br>

    <img src="https://i.imgur.com/kDHijRv.jpg" alt="Proton Source CD's" width=300 height=200>
    <br>
    <label for="Q1">A:</label>
    <select id="Q1" class="Q">
      <option value="0">SELECT</option>
      <option value="1">L:CRDEV</option>
      <option value="2">L:CDC</option>
      <option value="3">L:LINCDC</option>
      <option value="4">L:LINAC</option>
    </select>
    <br>
    <label for="Q2">B:</label>
    <select id="Q2" class="Q">
      <option value="0">SELECT</option>
      <option value="1">n1</option>
      <option value="2">n2</option>
      <option value="3">n3</option>
      <option value="4">n4</option>
    </select>
    <br>
    <label for="Q3">C:</label>
    <select id="Q3" class="Q">
      <option value="0">SELECT</option>
      <option value="1">e1</option>
      <option value="2">e2</option>
      <option value="3">e3</option>
      <option value="4">e4</option>
    </select>

    <br>
    <br>

    <button onclick="myFunc()">Click me</button>

    <script>
    	// Get dropdown elements when page loads
      var q1 = document.getElementById("Q1");
      var q2 = document.getElementById("Q2");
      var q3 = document.getElementById("Q3");
      

      var ans = [1, 2, 3]
      var counter = 0;
      var count = 0;

      function myFunc() {
      	// get value of dropdown elements
      	var valueQ1 = q1.value;
        var valueQ2 = q2.value;
        var valueQ3 = q3.value;
        var inpans = [valueQ1, valueQ2, valueQ3];
        while (count < ans.length) {
          if (ans[count] == inpans[count]) {
            counter++;
            count++;
          } else {
            counter = counter;
            count++;
          }
        }
        document.getElementById("one").innerHTML = "You got " + counter + " right.";
      }

    </script>
    <p id="one"></p>
  </body>

</html>

इसके लायक क्या है, यहां बताया गया है कि मैं समकक्ष कोड कैसे लिखूंगा। यह प्रत्येक ड्रॉपडाउन पर आपके पास मौजूद वर्ग का लाभ उठाता है, और फिर सभी ड्रॉपडाउन पर पुनरावृति करके यह जांचता है कि क्या वे सही उत्तर के बराबर हैं। यदि आप चाहते हैं कि प्रयोक्ता इस प्रश्न पर कई बार प्रयास करें तो आप {once: true} विकल्प को हटा सकते हैं:

// Get dropdown elements when page loads
const dropdowns = document.querySelectorAll('.Q');
const submitBtn = document.querySelector("#guess-btn");
const resultElem = document.getElementById("one");
const ans = [1, 2, 3];
submitBtn.addEventListener("click", () => {
  const correctCount = [...dropdowns].reduce(
    (total, dropdown, i) => total + (+dropdown.value === ans[i]), 0
  );
  resultElem.innerText = `You got ${correctCount} right.`;
}, {once: true});
<h1>Critical Device Test</h1>
<p>Please match the letter to the corresponding answer.</p>

<br />
<br />

<img src="https://i.imgur.com/kDHijRv.jpg" alt="Proton Source CD's" width="300" height="200" />
<br />
<label for="Q1">A:</label>
<select id="Q1" class="Q">
  <option value="0">SELECT</option>
  <option value="1">L:CRDEV</option>
  <option value="2">L:CDC</option>
  <option value="3">L:LINCDC</option>
  <option value="4">L:LINAC</option>
</select>
<br />
<label for="Q2">B:</label>
<select id="Q2" class="Q">
  <option value="0">SELECT</option>
  <option value="1">n1</option>
  <option value="2">n2</option>
  <option value="3">n3</option>
  <option value="4">n4</option>
</select>
<br />
<label for="Q3">C:</label>
<select id="Q3" class="Q">
  <option value="0">SELECT</option>
  <option value="1">e1</option>
  <option value="2">e2</option>
  <option value="3">e3</option>
  <option value="4">e4</option>
</select>

<br />
<br />

<button id="guess-btn">Click me</button>
<p id="one"></p>
2
Nick Parsons 21 मार्च 2020, 05:20