reCAPTCHA के रंग-रूप को पसंद के मुताबिक बनाना

अहम जानकारी: reCAPTCHA API का 1.0 वर्शन अब काम नहीं करता. कृपया इसे 2.0 वर्शन पर अपग्रेड करें. ज़्यादा जानें

अपनी साइट पर reCAPTCHA इंस्टॉल करने के बाद, आप इसके दिखने का तरीका बदल सकते हैं. इस पेज पर बताया गया है: (1) किसी स्टैंडर्ड reCAPTCHA थीम को कैसे चुनें; (2) reCAPTCHA की थीम को पूरी तरह से पसंद के मुताबिक कैसे बनाएं; और (3) विजेट की भाषा बदलकर reCAPTCHA को अंतरराष्ट्रीय कैसे बनाएं.

स्टैंडर्ड थीम

reCAPTCHA विजेट को कोई दूसरी थीम दिखाने के लिए, आपको इस कोड को अपने मुख्य एचटीएमएल पेज में, उस <form> एलिमेंट से पहले जोड़ना होगा जहां reCAPTCHA दिखता है (यह कोड तब काम नहीं करेगा, जब इसे मुख्य स्क्रिप्ट के बाद रखा जाए, जहां reCAPTCHA पहली बार शुरू किया गया हो):

 <script type="text/javascript">
 var RecaptchaOptions = {
    theme : 'theme_name'
 };
 </script>

किसी स्टैंडर्ड थीम का इस्तेमाल करने के लिए, आपको 'theme_name' की जगह इन चार थीम में से किसी एक का इस्तेमाल करना होगा:

'लाल' (डिफ़ॉल्ट थीम)	'सफ़ेद'
'ब्लैकग्लास'	'साफ़'

पसंद के मुताबिक थीम बनाना

पसंद के मुताबिक थीम बनाने की सुविधा से, यह कंट्रोल किया जा सकता है कि reCAPTCHA इमेज कैसी दिखेगी. (यहां कस्टम थीम का डेमो दिया गया है.) कस्टम थीम का इस्तेमाल करने के लिए, पहले आपको RecaptchaOptions की थीम प्रॉपर्टी को 'कस्टम' पर सेट करना होगा. इससे reCAPTCHA को पता चलता है कि इसे खुद का यूज़र इंटरफ़ेस नहीं बनाना चाहिए. लोगों को कैप्चा दिखाने के लिए, reCAPTCHA नीचे दिए गए आईडी वाले एचटीएमएल एलिमेंट पर निर्भर रहेगा:

• recaptcha_image आईडी वाला एक खाली div. इमेज यहां दिखेगी. यह div 300x57 पिक्सल का होगा.
• आईडी और नाम, दोनों वाला टेक्स्ट इनपुट recaptcha_response_field पर सेट किया गया. लोग यहां अपने जवाब डाल सकते हैं.
• आपके पास एक ऐसा डीआईवी बनाने का भी विकल्प होता है जिसमें पूरा reCAPTCHA विजेट मौजूद हो. इस आईडी div को custom_theme_widget में रखा जाना चाहिए और div की शैली display:none पर सेट होनी चाहिए. reCAPTCHA थीमिंग कोड पूरी तरह लोड हो जाने पर, div दिखेगा. यह एलिमेंट, पेज के लोड होने के दौरान उसे फ़्लिकर नहीं करता.

इन सभी को लागू करने के लिए, इस कोड को अपने मुख्य एचटीएमएल पेज पर, <form> एलिमेंट से पहले कहीं भी डालें जहां reCAPTCHA दिखता है:

 <script type="text/javascript">
 var RecaptchaOptions = {
    theme : 'custom',
    custom_theme_widget: 'recaptcha_widget'
 };
 

इसके बाद, <form> एलिमेंट में जहां आपको reCAPTCHA दिखाना है वहां इसे डालें:

 <div id="recaptcha_widget" style="display:none">

   <div id="recaptcha_image"></div>
   <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>

   <span class="recaptcha_only_if_image">Enter the words above:</span>
   <span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>

   <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />

   <div><a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a></div>
   <div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Get an audio CAPTCHA</a></div>
   <div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Get an image CAPTCHA</a></div>

   <div><a href="javascript:Recaptcha.showhelp()">Help</a></div>

 </div>

 <script type="text/javascript"
    src="http://www.google.com/recaptcha/api/challenge?k=your_public_key">
 </script>
 <noscript>
   <iframe src="http://www.google.com/recaptcha/api/noscript?k=your_public_key"
        height="300" width="500" frameborder="0"></iframe><br>
   <textarea name="recaptcha_challenge_field" rows="3" cols="40">
   </textarea>
   <input type="hidden" name="recaptcha_response_field"
        value="manual_challenge">
 </noscript>

ध्यान दें कि आखिरी कुछ लाइनें, reCAPTCHA दिखाने का स्टैंडर्ड तरीका हैं. इसके बारे में इस गाइड के शुरुआती दौर में बताया गया है.

ऊपर दिए गए कोड में क्या हो रहा है. reCAPTCHA JavaScript ऑब्जेक्ट ऐसे तरीके उपलब्ध कराता है जिनकी मदद से, कैप्चा की स्थिति बदली जा सकती है. फिर से लोड करने के तरीके में एक नई कैप्चा चुनौती दिखती है. साथ ही, switch_type तरीका, इमेज और ऑडियो कैप्चा के बीच टॉगल करता है. reCAPTCHA के लिए पूरा यूज़र इंटरफ़ेस (यूआई) बनाने के लिए, कैप्चा के अलग-अलग स्टेटस में होने पर, हम अलग-अलग जानकारी दिखाते हैं. उदाहरण के लिए, जब उपयोगकर्ता इमेज कैप्चा को देख रहा होता है, तब "ऑडियो कैप्चा पाएं" का लिंक दिखता है. एक स्टेटफ़ुल यूज़र इंटरफ़ेस (यूआई) बनाने के लिए, आपके लिए चार सीएसएस क्लास उपलब्ध हैं:

सीएसएस क्लास	तब दिखेगा, जब...
recaptcha_only_if_image	एक चित्र कैप्चा दिखाई दे रहा है
recaptcha_only_if_audio	एक ऑडियो कैप्चा दिखाया जा रहा है
recaptcha_only_if_incorrect_sol	पिछला समाधान गलत था
recaptcha_only_if_no_incorrect_sol	पिछला समाधान गलत नहीं था

हालांकि, थीम में आपको कई विकल्प मिलते हैं, लेकिन आपको यूज़र इंटरफ़ेस के एक जैसी स्टाइल वाले नियमों का पालन करना होगा:

• आपको यह बताना होगा कि reCAPTCHA विजेट के पास, reCAPTCHA का इस्तेमाल किया जा रहा है.
• आपको एक ऐसा बटन उपलब्ध कराना होगा जो रीलोड फ़ंक्शन को कॉल करता हो.
• आपको दृष्टि बाधित उपयोगकर्ताओं के लिए, ऑडियो कैप्चा को ऐक्सेस करने की सुविधा देनी होगी.
• reCAPTCHA विजेट में बटन के तौर पर इस्तेमाल की जाने वाली किसी भी इमेज के लिए, आपको वैकल्पिक लेख देना होगा.

इंटरनेशनलाइज़ेशन: विजेट की भाषा बदलना

reCAPTCHA विजेट को दो तरीकों से अंतरराष्ट्रीय बनाया जा सकता है:

पहले से मौजूद अनुवाद

reCAPTCHA के कई अनुवाद पहले से मौजूद होते हैं. इनका इस्तेमाल, RecaptchaOptions का भाषा पैरामीटर सेट करके किया जा सकता है:

<script type="text/javascript">
var RecaptchaOptions = {
   lang : 'fr',
};
</script>

पसंद के मुताबिक अनुवाद

अगर आपकी भाषा का अनुवाद उपलब्ध नहीं है, तो अपने हिसाब से अनुवाद किया जा सकता है. आपको reCAPTCHA JavaScript की सभी स्ट्रिंग का अनुवाद करना होगा. साथ ही, RecaptchaOptions का "custom_translations" वैरिएबल सेट करना होगा. जो स्ट्रिंग सेट नहीं की जाएंगी उन्हें आपकी भाषा के डिफ़ॉल्ट अनुवाद से लिया जाएगा. इसका इस्तेमाल किसी डिफ़ॉल्ट अनुवाद के सिर्फ़ एक हिस्से को बदलने के लिए किया जा सकता है. उदाहरण के लिए, अगर हमारे चुने गए अनुवाद आपके इलाके के हिसाब से सही नहीं है, तो ऐसा करें. उदाहरण के लिए:

<script type= "text/javascript">
var RecaptchaOptions = {
   custom_translations : { instructions_visual : "This is my text:" }
};
</script>

यहां पसंद के मुताबिक इतालवी अनुवाद का एक चालू उदाहरण दिया गया है (इस कोड को reCAPTCHA को कॉल करने से पहले डालें):

<script type="text/javascript">
        var RecaptchaOptions = {
                custom_translations : {
                        instructions_visual : "Scrivi le due parole:",
                        instructions_audio : "Trascrivi ci\u00f2 che senti:",
                        play_again : "Riascolta la traccia audio",
                        cant_hear_this : "Scarica la traccia in formato MP3",
                        visual_challenge : "Modalit\u00e0 visiva",
                        audio_challenge : "Modalit\u00e0 auditiva",
                        refresh_btn : "Chiedi due nuove parole",
                        help_btn : "Aiuto",
                        incorrect_try_again : "Scorretto. Riprova.",
                },
                lang : 'it', // Unavailable while writing this code (just for audio challenge)
                theme : 'red' // Make sure there is no trailing ',' at the end of the RecaptchaOptions dictionary
        };
</script>

reCAPTCHA विकल्प रेफ़रंस

इन फ़ील्ड को RecaptchaOptions डिक्शनरी में सेट करने के लिए किया जा सकता है:

कुंजी	संभावित वैल्यू	डिफ़ॉल्ट वैल्यू	मतलब
थीम	'लाल' | 'सफ़ेद' | 'ब्लैकग्लास' | 'साफ़' | 'कस्टम'	'लाल'	इससे तय होता है कि reCAPTCHA के लिए किस थीम का इस्तेमाल करना है. लाल, सफ़ेद, ब्लैकग्लास, और क्लीन थीम पहले से तय की गई थीम हैं. इनमें reCAPTCHA, यूज़र इंटरफ़ेस की सुविधा देता है. पसंद के मुताबिक बनाई गई थीम में, reCAPTCHA के दिखने के तरीके पर आपकी साइट का पूरा कंट्रोल होता है.
lang	इस्तेमाल किया जा सकने वाला कोई भी भाषा कोड.	'hi'	पहले से तय थीम के लिए, इंटरफ़ेस में किस भाषा का इस्तेमाल किया जाता है. ये भाषाएं काम करती हैं: Language कोड अंग्रेज़ी en डच nl फ़्रेंच fr जर्मन de पॉर्चुगीज़ pt रशियन ru स्पैनिश es टर्किश tr अगर आपकी साइट की भाषा काम नहीं करती है, तो reCAPTCHA को अपनी भाषा में रखने के लिए, पसंद के मुताबिक थीम का इस्तेमाल किया जा सकता है.
custom_translations	अनुवादों का शब्दकोश	शून्य	reCAPTCHA स्ट्रिंग का कस्टम अनुवाद तय करने के लिए, इसका इस्तेमाल करें.
custom_theme_widget	डीओएम एलिमेंट के आईडी वाली स्ट्रिंग	शून्य	कस्टम थीमिंग का इस्तेमाल करते समय, यह एक div एलिमेंट है, जिसमें विजेट शामिल होता है. इस सुविधा का इस्तेमाल करने का तरीका जानने के लिए, पसंद के मुताबिक थीम वाला सेक्शन देखें.
टैबइंडेक्स	कोई भी पूर्णांक		reCAPTCHA टेक्स्ट बॉक्स के लिए, tabindex को सेट करता है. अगर फ़ॉर्म में मौजूद दूसरे एलिमेंट Tabindex का इस्तेमाल करते हैं, तो इसे सेट करना चाहिए, ताकि उपयोगकर्ता को नेविगेट करने में आसानी हो

उदाहरण के लिए, यह स्क्रिप्ट टैग reCAPTCHA की थीम को सफ़ेद बनाता है और इसका Tabindex 2 उदाहरण है:

<script>
var RecaptchaOptions = {
   theme : 'white',
   tabindex : 2
};
</script>