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 तक. यहां उपयोगकर्ता को अपना जवाब डालें.
• वैकल्पिक रूप से, एक div जिसमें पूरा 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	पिछला समाधान गलत नहीं था

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

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

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

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

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

reCAPTCHA की मदद से, कई अनुवाद पहले से मौजूद हैं. आप इनका lang पैरामीटर सेट करके इसका उपयोग कर सकते हैं 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>

reCAPTCHAOptions का रेफ़रंस

Re कैप्चाOptions शब्दकोश में इन फ़ील्ड को सेट किया जा सकता है:

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

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

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