Add big 5 info

common/messages/de.json

@@ -667,6 +667,11 @@
   "profile.big5_low": "Niedrig",
   "profile.big5_neuroticism": "Neurotizismus",
   "profile.big5_openness": "Offenheit",
+  "profile.big5_guidance": "Das Big-Five-Persönlichkeitsmodell ist ein wissenschaftliches Modell, das Variationen in der Persönlichkeit in fünf separate Faktoren gruppiert (",
+  "profile.big5_wikipedia_link": "Wikipedia-Artikel",
+  "profile.big5_guidance_suffix": "). Sie können einen gut zitierten Public-Domain-Annäherungstest ",
+  "profile.big5_test_link": "hier",
+  "profile.big5_guidance_end": ".",
   "profile.big5_very_high": "Sehr hoch",
   "profile.big5_very_low": "Sehr niedrig",
   "profile.bio.about_me": "Über mich",

common/messages/fr.json

@@ -666,6 +666,11 @@
   "profile.big5_low": "Faible",
   "profile.big5_neuroticism": "Névrosisme",
   "profile.big5_openness": "Ouverture",
+  "profile.big5_guidance": "Le modèle des traits de personnalité Big Five est un modèle scientifique qui regroupe les variations de personnalité en cinq facteurs distincts (",
+  "profile.big5_wikipedia_link": "article Wikipédia",
+  "profile.big5_guidance_suffix": "). Vous pouvez passer un test approximatif de domaine public bien cité ",
+  "profile.big5_test_link": "ici",
+  "profile.big5_guidance_end": ".",
   "profile.big5_very_high": "Très élevé",
   "profile.big5_very_low": "Très faible",
   "profile.bio.about_me": "À propos de moi",

web/components/optional-profile-form.tsx

@@ -28,6 +28,7 @@ import {SignupBio} from 'web/components/bio/editable-bio'
 import {Button, IconButton} from 'web/components/buttons/button'
 import {Col} from 'web/components/layout/col'
 import {Row} from 'web/components/layout/row'
+import {CustomLink} from 'web/components/links'
 import {MultiCheckbox} from 'web/components/multi-checkbox'
 import {City, CityRow, profileToCity, useCitySearch} from 'web/components/search-location'
 import {Carousel} from 'web/components/widgets/carousel'
@@ -768,11 +769,28 @@ export const OptionalProfileUserForm = (props: {
         </Col>
 
         {/* Big Five personality traits (0–100) */}
-        <Col className={clsx(colClassName, 'max-w-[550px]')}>
+        <Col className={clsx(colClassName)}>
           <label className={clsx(labelClassName)}>
             {t('profile.big5', 'Big Five Personality Traits')}
           </label>
-          <div className="space-y-4">
+          <p className="guidance custom-link">
+            {t(
+              'profile.big5_guidance',
+              'The Big Five personality trait model is a scientific model that groups variation in personality into five separate factors (',
+            )}
+            <CustomLink href={'https://en.wikipedia.org/wiki/Big_Five_personality_traits'}>
+              {t('profile.big5_wikipedia_link', 'Wikipedia article')}
+            </CustomLink>
+            {t(
+              'profile.big5_guidance_suffix',
+              '). You can take a well-cited public-domain approximate test ',
+            )}
+            <CustomLink href={'https://emilywilloughby.com/research/bfas'}>
+              {t('profile.big5_test_link', 'here')}
+            </CustomLink>
+            {t('profile.big5_guidance_end', '.')}
+          </p>
+          <div className={clsx('space-y-4', 'w-full max-w-[550px]')}>
             <Big5Slider
               label={t('profile.big5_openness', 'Openness')}
               value={profile.big5_openness ?? 50}
@@ -798,13 +816,13 @@ export const OptionalProfileUserForm = (props: {
               value={profile.big5_neuroticism ?? 50}
               onChange={(v) => setProfile('big5_neuroticism', v)}
             />
-            <p className="text-sm text-ink-500">
-              {t(
-                'profile.big5_hint',
-                'Drag each slider to set where you see yourself on these traits (0 = low, 100 = high).',
-              )}
-            </p>
           </div>
+          <p className="text-sm text-ink-500">
+            {t(
+              'profile.big5_hint',
+              'Drag each slider to set where you see yourself on these traits (0 = low, 100 = high).',
+            )}
+          </p>
         </Col>
 
         <Category title={t('profile.optional.diet', 'Diet')} />