reCAPTCHA এর চেহারা এবং অনুভূতি কাস্টমাইজ করা

গুরুত্বপূর্ণ : reCAPTCHA API-এর সংস্করণ 1.0 আর সমর্থিত নয়, অনুগ্রহ করে সংস্করণ 2.0-এ আপগ্রেড করুন৷ আরও জানুন

একবার আপনি আপনার সাইটে সফলভাবে reCAPTCHA ইনস্টল করার পরে, আপনি এটির চেহারা পরিবর্তন করতে চাইতে পারেন। এই পৃষ্ঠাটি ব্যাখ্যা করে: (1) কিভাবে স্ট্যান্ডার্ড reCAPTCHA থিমগুলির মধ্যে একটি নির্বাচন করবেন; (2) কিভাবে reCAPTCHA এর চেহারা সম্পূর্ণরূপে কাস্টমাইজ করা যায় ; এবং (3) কিভাবে উইজেটের ভাষা পরিবর্তন করে reCAPTCHA আন্তর্জাতিকীকরণ করা যায়।

স্ট্যান্ডার্ড থিম

reCAPTCHA উইজেটটিকে একটি ভিন্ন থিম প্রদর্শন করার জন্য, আপনাকে প্রথমে আপনার প্রধান HTML পৃষ্ঠাতে নিম্নলিখিত কোডটি যোগ করতে হবে <form> উপাদানটির আগে যেখানে reCAPTCHA প্রদর্শিত হবে (এটি মূল স্ক্রিপ্টের পরে যেখানে reCAPTCHA প্রথমে আমন্ত্রণ জানানো হয়েছে তা হলে এটি কাজ করবে না) :

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

একটি স্ট্যান্ডার্ড থিম ব্যবহার করতে, আপনাকে নিম্নলিখিত চারটি থিম নামের একটি দিয়ে 'theme_name' প্রতিস্থাপন করতে হবে:

'লাল' (ডিফল্ট থিম)	'সাদা'
'কালো কাচ'	'পরিষ্কার'

কাস্টম থিমিং

কাস্টম থিমিং আপনাকে reCAPTCHA চিত্রটি ঠিক কীভাবে প্রদর্শিত হবে তা নিয়ন্ত্রণ করতে দেয়। ( এখানে কাস্টম থিমিংয়ের একটি ডেমো রয়েছে।) কাস্টম থিমিং ব্যবহার করার জন্য, আপনাকে প্রথমে RecaptchaOptions এর থিম প্রপার্টি 'কাস্টম'-এ সেট করতে হবে। এটি reCAPTCHA কে বলে যে এটির নিজস্ব একটি ইউজার ইন্টারফেস তৈরি করা উচিত নয়। reCAPTCHA ব্যবহারকারীর কাছে ক্যাপচা প্রদর্শন করতে নিম্নলিখিত আইডি সহ HTML উপাদানের উপস্থিতির উপর নির্ভর করবে:

• আইডি recaptcha_image সহ একটি খালি ডিভ। এখানেই প্রকৃত চিত্র স্থাপন করা হবে। ডিভ হবে 300x57 পিক্সেল।
• আইডি এবং নাম সহ একটি পাঠ্য ইনপুট উভয়ই recaptcha_response_field এ সেট করা হয়েছে। এখানে ব্যবহারকারী তাদের উত্তর লিখতে পারেন।
• ঐচ্ছিকভাবে, একটি ডিভ যাতে পুরো reCAPTCHA উইজেট থাকে। এই আইডি divটিকে custom_theme_widget এ স্থাপন করা উচিত এবং div-এর শৈলী display:none । reCAPTCHA থিমিং কোড সম্পূর্ণরূপে লোড হওয়ার পরে, এটি divটিকে দৃশ্যমান করবে৷ এই উপাদানটি লোড হওয়ার সময় পৃষ্ঠাটি ফ্লিকার করা এড়িয়ে যায়।

এই সমস্ত কিছু বাস্তবায়ন করতে, প্রথমে আপনার প্রধান HTML পৃষ্ঠায় <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-এর জন্য একটি সম্পূর্ণ UI তৈরি করার জন্য, ক্যাপচা যখন বিভিন্ন রাজ্যে থাকে তখন আমরা বিভিন্ন তথ্য প্রদর্শন করি। উদাহরণস্বরূপ, যখন ব্যবহারকারী একটি চিত্র ক্যাপচা দেখছেন, তখন "একটি অডিও ক্যাপচা পান" এর একটি লিঙ্ক দেখানো হয়৷ একটি রাষ্ট্রীয় UI তৈরি করতে আপনার জন্য চারটি CSS ক্লাস উপলব্ধ:

সিএসএস ক্লাস	দৃশ্যমান যখন...
recaptcha_only_if_image	একটি চিত্র ক্যাপচা প্রদর্শিত হচ্ছে
recaptcha_only_if_audio	একটি অডিও ক্যাপচা প্রদর্শিত হচ্ছে
recaptcha_only_if_incorrect_sol	পূর্ববর্তী সমাধান ভুল ছিল
recaptcha_only_if_no_incorrect_sol	পূর্ববর্তী সমাধান ভুল ছিল না

যদিও থিমিং আপনাকে অনেকগুলি বিকল্প দেয়, আপনাকে কিছু ইউজার ইন্টারফেস সামঞ্জস্যের নিয়ম অনুসরণ করতে হবে:

• আপনাকে অবশ্যই বলতে হবে যে আপনি ক্যাপচা উইজেটের কাছে reCAPTCHA ব্যবহার করছেন৷
• আপনাকে অবশ্যই একটি দৃশ্যমান বোতাম প্রদান করতে হবে যা পুনরায় লোড ফাংশনকে কল করে।
• আপনাকে অবশ্যই একটি অডিও ক্যাপচা অ্যাক্সেস করার জন্য দৃষ্টি প্রতিবন্ধী ব্যবহারকারীদের একটি উপায় প্রদান করতে হবে।
• আপনি reCAPTCHA উইজেটে বোতাম হিসেবে ব্যবহার করেন এমন যেকোনো ছবির জন্য আপনাকে অবশ্যই Alt টেক্সট প্রদান করতে হবে।

আন্তর্জাতিকীকরণ: উইজেটের ভাষা পরিবর্তন করা

reCAPTCHA উইজেটকে আন্তর্জাতিকীকরণ করার দুটি উপায় রয়েছে:

অনুবাদে নির্মিত

reCAPTCHA-এর অনেকগুলি অন্তর্নির্মিত অনুবাদ রয়েছে৷ আপনি RecaptchaOptions এর ল্যাং প্যারামিটার সেট করে এগুলি ব্যবহার করতে পারেন:

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

কাস্টম অনুবাদ

আপনার ভাষার জন্য অনুবাদ না থাকলে, আপনি নিজের ভাষা তৈরি করতে পারেন। আপনাকে reCAPTCHA জাভাস্ক্রিপ্টের সমস্ত স্ট্রিং অনুবাদ করতে হবে এবং 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 রেফারেন্স

নিম্নলিখিত ক্ষেত্রগুলি RecaptchaOptions অভিধানে সেট করা যেতে পারে:

চাবি	সম্ভাব্য মান	ডিফল্ট মান	অর্থ
থিম	'লাল' | 'সাদা' | 'কালোকালা' | 'পরিষ্কার' | 'কাস্টম'	'লাল'	reCAPTCHA-এর জন্য কোন থিম ব্যবহার করতে হবে তা নির্ধারণ করে। লাল, সাদা, ব্ল্যাকগ্লাস এবং ক্লিন থিম হল পূর্ব-নির্ধারিত থিম যেখানে reCAPTCHA ইউজার ইন্টারফেস প্রদান করে। কাস্টম থিমে, আপনার সাইটের reCAPTCHA উপস্থিতির উপর সম্পূর্ণ নিয়ন্ত্রণ রয়েছে।
lang	যেকোন সমর্থিত ভাষা কোড।	'en'	পূর্ব-নির্ধারিত থিমগুলির জন্য ইন্টারফেসে কোন ভাষা ব্যবহার করা হয়। নিম্নলিখিত ভাষা সমর্থিত: ভাষা কোড ইংরেজি en ডাচ nl ফরাসি fr জার্মান ডি পর্তুগীজ pt রাশিয়ান ru স্পেনীয় es তুর্কি tr আপনার সাইটের ভাষা সমর্থিত না হলে, আপনি সবসময় কাস্টম থিমিং ব্যবহার করে আপনার ভাষায় reCAPTCHA রাখতে পারেন।
কাস্টম_অনুবাদ	অনুবাদের একটি অভিধান	খালি	reCAPTCHA স্ট্রিংগুলির কাস্টম অনুবাদগুলি নির্দিষ্ট করতে এটি ব্যবহার করুন৷
কাস্টম_থিম_উইজেট	একটি DOM উপাদানের ID সহ একটি স্ট্রিং৷	খালি	কাস্টম থিমিং ব্যবহার করার সময়, এটি একটি ডিভ উপাদান যা উইজেট ধারণ করে। এটি কীভাবে ব্যবহার করবেন তার জন্য কাস্টম থিমিং বিভাগটি দেখুন।
tabindex	যেকোনো পূর্ণসংখ্যা	0	reCAPTCHA পাঠ্য বাক্সের জন্য একটি ট্যাবিন্ডেক্স সেট করে। যদি ফর্মের অন্যান্য উপাদানগুলি একটি ট্যাবিনডেক্স ব্যবহার করে তবে এটি সেট করা উচিত যাতে ব্যবহারকারীর জন্য নেভিগেশন সহজ হয়

উদাহরণ হিসেবে, এই স্ক্রিপ্ট ট্যাগটি reCAPTCHA-এর একটি সাদা থিম এবং ট্যাবিনডেক্স 2 তৈরি করে:

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