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	पिछला समाधान गलत नहीं था

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

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

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

reCAPTCHA विजेट को अलग-अलग देशों में उपलब्ध कराने के दो तरीके हैं:

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

reCAPTCHA की मदद से, कई अनुवाद पहले से मौजूद हैं. आप इनका lang पैरामीटर सेट करके इसका उपयोग कर सकते हैं RecaptchaOptions:

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

कस्टम अनुवाद

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

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

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

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