התאמה אישית של המראה והתחושה של reCAPTCHA

חשוב: אין יותר תמיכה בגרסה 1.0 של reCAPTCHA API. צריך לשדרג לגרסה 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 שהוא לא צריך ליצור ממשק משתמש משלו. כדי להציג את ה-CAPTCHA למשתמש, reCAPTCHA יתבסס על נוכחות של רכיבי HTML עם המזהים הבאים:

• div ריק עם המזהה recaptcha_image. כאן נמצאת גרסת למקם את התמונה. גודל ה-div יהיה 300x57 פיקסלים.
• קלט טקסט עם מזהה ושם שמוגדרים שניהם כ-recaptcha_response_field. כאן המשתמש יכול מזינים את התשובה.
• אופציונלי: קובץ div שמכיל את כל ה-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, כפי שמוסבר במבוא. במדריך הזה.

הנה מה שקורה בקוד שלמעלה. אובייקט ה-JavaScript של ReCAPTCHA מספק שיטות שמאפשרות לשנות את מצב ה-CAPTCHA. שיטת טעינה מחדש מציגה אתגר CAPTCHA חדש, והשיטה המתג switch_type מחליף בין תמונות CAPTCHA בתמונה לאודיו. כדי ליצור ממשק משתמש מלא ל-reCAPTCHA, הצגת פרטים שונים כאשר ה-CAPTCHA נמצא במצבים שונים. למשל, כשהמשתמש צופה תמונה CAPTCHA, קישור אל "Get a audio CAPTCHA" מוצגת. אפשר ליצור ארבעה מחלקות CSS כדי ליצור ממשק משתמש עם שמירת מצב:

רמת שירות CSS	גלוי כאשר...
recaptcha_only_if_image	מוצגת תמונה של CAPTCHA
recaptcha_only_if_audio	מוצג CAPTCHA עם אודיו
recaptcha_only_if_incorrect_sol	הפתרון הקודם היה שגוי
recaptcha_only_if_no_incorrect_sol	הפתרון הקודם לא היה שגוי

אמנם עיצובים נותנים לכם אפשרויות רבות, אבל חשוב לפעול לפי כמה כללי עקביות בממשק המשתמש:

• עליכם לציין שאתם משתמשים ב-reCAPTCHA ליד הווידג'ט של CAPTCHA.
• צריך לכלול לחצן גלוי שקורא לפונקציית הטעינה מחדש.
• חובה לספק למשתמשים עם לקויות ראייה דרך לגשת ל-CAPTCHA אודיו.
• עליכם להוסיף טקסט חלופי לכל תמונה שבה אתם משתמשים כלחצנים בווידג'ט reCAPTCHA.

בינלאומי: שינוי השפה של הווידג'ט

יש שתי דרכים לרחב את הווידג'ט של reCAPTCHA:

תרגומים מובנים

ל-reCAPTCHA יש מספר תרגומים מובנים. אפשר להשתמש בהם על ידי הגדרת הפרמטר lang של RecaptchaOptions:

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

תרגומים בהתאמה אישית

אם אין תרגום לשפה שלך, ניתן ליצור תרגום משלך. צריך לתרגם את כל המחרוזות קוד ה-JavaScript של reCAPTCHA ומגדירים את '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

ניתן להגדיר את השדות הבאים במילון RecaptchaOptions:

מפתח	ערכים אפשריים	ערך ברירת המחדל	משמעות
עיצוב	אדום | לבן | 'זכוכית שחורה' | 'נקי' | 'custom'	'אדום'	המדיניות הזו מגדירה את העיצוב שישמש ל-reCAPTCHA. העיצובים האדומים, הלבן, זכוכית השחור והעיצובים הנקיים הם עיצובים מוגדרים מראש כאשר reCAPTCHA מספק את ממשק המשתמש. בעיצוב המותאם אישית, לאתר שלכם יש שליטה מלאה על מראה ה-reCAPTCHA.
lang	כל קוד שפה נתמך.	'en'	השפה שבה נעשה שימוש בממשק לרכיבים המוגדרים מראש עיצובים. השפות הבאות נתמכות: שפה קוד אנגלית en הולנדית nl צרפתית fr גרמנית de פורטוגזית pt רוסית ru ספרדית es טורקית tr אם השפה של האתר שלכם לא נתמכת, תמיד תוכלו להשתמש בנושאים מותאמים אישית כדי להציג את reCAPTCHA בשפה שלכם.
custom_translations	מילון של תרגומים	null	ניתן להשתמש באפשרות הזו כדי לציין תרגומים מותאמים אישית של מחרוזות reCAPTCHA.
custom_theme_widget	מחרוזת עם המזהה של רכיב DOM	null	כשמשתמשים בעיצוב מותאם אישית, זהו רכיב div שמכיל את הווידג'ט. ניתן לעיין בקטע בנושא עיצוב מותאם אישית כדי להבין איך להשתמש באפשרות הזו.
tabindex	כל מספר שלם	0	מגדיר tabindex לתיבת הטקסט reCAPTCHA. אם רכיבים אחרים בטופס משתמשים ב- Tabindex, יש להגדיר זאת כדי שלמשתמש יהיה קל יותר לנווט

לדוגמה, תג הסקריפט הזה יוצר ל-reCAPTCHA עיצוב לבן עם tabindex 2:

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