जावास्क्रिप्ट में HTML कोड में प्रश्नोत्तरी और उत्तरों के साथ टेस्ट
इस और अगले कुछ पाठों में हम आपके साथ प्रश्नोत्तरी बनाने में लगेंगे। हम सरलतम विकल्पों से शुरू करेंगे और धीरे-धीरे जटिलता बढ़ाते जाएंगे।
शुरुआत के लिए, मान लीजिए कि हम प्रश्नों का एक सेट बनाना चाहते हैं, जिसमें से प्रत्येक का केवल एक ही उत्तर संभव हो। मान लीजिए कि उत्तर उपयोगकर्ता द्वारा स्वयं प्रश्नों के नीचे इनपुट बॉक्स में भरे जाते हैं।
लिखित को HTML कोड के साथ दर्शाता हूं:
<div id="test">
<div>
<p>प्रश्न 1?</p>
<input>
</div>
<div>
<p>प्रश्न 2?</p>
<input>
</div>
<div>
<p>प्रश्न 3?</p>
<input>
</div>
</div>
जैसा कि आप देख रहे हैं, हमारे पास प्रश्न और उत्तरों के लिए इनपुट बॉक्स हैं। अब यह सोचना बाकी है कि हम सही उत्तर कहां संग्रहीत करेंगे।
सबसे सरल जो सोचा जा सकता है - वह है
उत्तरों को सीधे इनपुट बॉक्स के HTML कोड में,
किसी data- विशेषता में संग्रहीत करना:
<div id="test">
<div>
<p>प्रश्न 1?</p>
<input data-right="उत्तर 1">
</div>
<div>
<p>प्रश्न 2?</p>
<input data-right="उत्तर 2">
</div>
<div>
<p>प्रश्न 3?</p>
<input data-right="उत्तर 3">
</div>
</div>
अगली बारीक जो सोचनी चाहिए: हम उत्तरों की शुद्धता की जांच किस समय करेंगे? यहां दो विकल्प सुझाए जा सकते हैं: या तो प्रत्येक इनपुट बॉक्स तुरंत उसमें उत्तर डालते ही जांच करे कि क्या यह उत्तर सही है, या फिर एक बटन हो, जिसके दबाने पर सभी प्रश्नों के उत्तर एक साथ जांचे जाएं।
हमने कोई भी विकल्प क्यों न चुना हो, यदि उत्तर सही है, तो इनपुट बॉक्स की सीमा (border) को हरे रंग में कर दें, और यदि गलत है - तो लाल रंग में। इसके लिए संबंधित CSS वर्ग बनाते हैं:
.right {
border: 1px solid green;
}
.wrong {
border: 1px solid red;
}
ऐसा करें कि इनपुट बॉक्स में उत्तर डालना
Enter कुंजी दबाने से पूरा हो।
मान लीजिए कि इस
स्थिति में इनपुट बॉक्स तुरंत उत्तर की शुद्धता की जांच करता है।
अपने कोड को इस तरह संशोधित करें कि जांच एक बटन दबाने पर की जाए।
