From 29befd934adedf78fd1440c67879e4d144d13e73 Mon Sep 17 00:00:00 2001
From: Carine Dengler <git@carine-dengler.de>
Date: Mon, 26 Feb 2024 16:21:48 +0100
Subject: [PATCH 1/5] feat: update smart contract

---
 contracts/evoting/types/ballots.go      | 18 ++++++++++------
 contracts/evoting/types/ballots_test.go | 28 ++++++++++++-------------
 integration/performance_test.go         |  2 +-
 internal/testing/fake/election.go       |  4 ++--
 4 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/contracts/evoting/types/ballots.go b/contracts/evoting/types/ballots.go
index 907678a2f..11cc69b28 100644
--- a/contracts/evoting/types/ballots.go
+++ b/contracts/evoting/types/ballots.go
@@ -89,7 +89,7 @@ func (b *Ballot) Unmarshal(marshalledBallot string, form Form) error {
 				ID:      ID(questionID),
 				MaxN:    q.GetMaxN(),
 				MinN:    q.GetMinN(),
-				Choices: make([]string, q.GetChoicesLength()),
+				Choices: make([]Choice, q.GetChoicesLength()),
 			}
 
 			results, err := selectQ.unmarshalAnswers(selections)
@@ -108,7 +108,7 @@ func (b *Ballot) Unmarshal(marshalledBallot string, form Form) error {
 				ID:      ID(questionID),
 				MaxN:    q.GetMaxN(),
 				MinN:    q.GetMinN(),
-				Choices: make([]string, q.GetChoicesLength()),
+				Choices: make([]Choice, q.GetChoicesLength()),
 			}
 
 			results, err := rankQ.unmarshalAnswers(ranks)
@@ -127,7 +127,7 @@ func (b *Ballot) Unmarshal(marshalledBallot string, form Form) error {
 				MaxN:      q.GetMaxN(),
 				MinN:      q.GetMinN(),
 				MaxLength: 0, // TODO: Should the length check be also done at decryption?
-				Choices:   make([]string, q.GetChoicesLength()),
+				Choices:   make([]Choice, q.GetChoicesLength()),
 			}
 
 			results, err := textQ.unmarshalAnswers(texts)
@@ -267,6 +267,12 @@ type Hint struct {
 	De string
 }
 
+// Choice contains a choice and an optional URL
+type Choice struct {
+	Choice string
+	URL    string
+}
+
 // Subject is a wrapper around multiple questions that can be of type "select",
 // "rank", or "text".
 type Subject struct {
@@ -431,7 +437,7 @@ type Select struct {
 	Title   Title
 	MaxN    uint
 	MinN    uint
-	Choices []string
+	Choices []Choice
 	Hint    Hint
 }
 
@@ -497,7 +503,7 @@ type Rank struct {
 	Title   Title
 	MaxN    uint
 	MinN    uint
-	Choices []string
+	Choices []Choice
 	Hint    Hint
 }
 
@@ -572,7 +578,7 @@ type Text struct {
 	MinN      uint
 	MaxLength uint
 	Regex     string
-	Choices   []string
+	Choices   []Choice
 	Hint      Hint
 }
 
diff --git a/contracts/evoting/types/ballots_test.go b/contracts/evoting/types/ballots_test.go
index bc94dea27..e280f513e 100644
--- a/contracts/evoting/types/ballots_test.go
+++ b/contracts/evoting/types/ballots_test.go
@@ -59,13 +59,13 @@ func TestBallot_Unmarshal(t *testing.T) {
 			Title:   Title{En: "", Fr: "", De: ""},
 			MaxN:    2,
 			MinN:    2,
-			Choices: make([]string, 3),
+			Choices: make([]Choice, 3),
 		}, {
 			ID:      decodedQuestionID(2),
 			Title:   Title{En: "", Fr: "", De: ""},
 			MaxN:    3,
 			MinN:    3,
-			Choices: make([]string, 5),
+			Choices: make([]Choice, 5),
 		}},
 
 		Ranks: []Rank{{
@@ -73,7 +73,7 @@ func TestBallot_Unmarshal(t *testing.T) {
 			Title:   Title{En: "", Fr: "", De: ""},
 			MaxN:    4,
 			MinN:    0,
-			Choices: make([]string, 4),
+			Choices: make([]Choice, 4),
 		}},
 
 		Texts: []Text{{
@@ -83,7 +83,7 @@ func TestBallot_Unmarshal(t *testing.T) {
 			MinN:      2,
 			MaxLength: 10,
 			Regex:     "",
-			Choices:   make([]string, 2),
+			Choices:   make([]Choice, 2),
 		}},
 	},
 	}}
@@ -318,13 +318,13 @@ func TestSubject_MaxEncodedSize(t *testing.T) {
 			Title:   Title{En: "", Fr: "", De: ""},
 			MaxN:    3,
 			MinN:    0,
-			Choices: make([]string, 3),
+			Choices: make([]Choice, 3),
 		}, {
 			ID:      encodedQuestionID(2),
 			Title:   Title{En: "", Fr: "", De: ""},
 			MaxN:    5,
 			MinN:    0,
-			Choices: make([]string, 5),
+			Choices: make([]Choice, 5),
 		}},
 
 		Ranks: []Rank{{
@@ -332,7 +332,7 @@ func TestSubject_MaxEncodedSize(t *testing.T) {
 			Title:   Title{En: "", Fr: "", De: ""},
 			MaxN:    4,
 			MinN:    0,
-			Choices: make([]string, 4),
+			Choices: make([]Choice, 4),
 		}},
 
 		Texts: []Text{{
@@ -342,7 +342,7 @@ func TestSubject_MaxEncodedSize(t *testing.T) {
 			MinN:      0,
 			MaxLength: 10,
 			Regex:     "",
-			Choices:   make([]string, 2),
+			Choices:   make([]Choice, 2),
 		}, {
 			ID:        encodedQuestionID(5),
 			Title:     Title{En: "", Fr: "", De: ""},
@@ -350,7 +350,7 @@ func TestSubject_MaxEncodedSize(t *testing.T) {
 			MinN:      0,
 			MaxLength: 10,
 			Regex:     "",
-			Choices:   make([]string, 3),
+			Choices:   make([]Choice, 3),
 		}},
 	}
 
@@ -403,7 +403,7 @@ func TestSubject_IsValid(t *testing.T) {
 		Title:   Title{En: "", Fr: "", De: ""},
 		MaxN:    0,
 		MinN:    0,
-		Choices: make([]string, 0),
+		Choices: make([]Choice, 0),
 	}}
 
 	mainSubject.Ranks = []Rank{{
@@ -411,7 +411,7 @@ func TestSubject_IsValid(t *testing.T) {
 		Title:   Title{En: "", Fr: "", De: ""},
 		MaxN:    0,
 		MinN:    0,
-		Choices: make([]string, 0),
+		Choices: make([]Choice, 0),
 	}}
 
 	configuration.Scaffold = []Subject{*mainSubject}
@@ -426,7 +426,7 @@ func TestSubject_IsValid(t *testing.T) {
 		Title:   Title{En: "", Fr: "", De: ""},
 		MaxN:    0,
 		MinN:    2,
-		Choices: make([]string, 0),
+		Choices: make([]Choice, 0),
 	}
 
 	configuration.Scaffold = []Subject{*mainSubject}
@@ -442,7 +442,7 @@ func TestSubject_IsValid(t *testing.T) {
 		Title:   Title{En: "", Fr: "", De: ""},
 		MaxN:    1,
 		MinN:    0,
-		Choices: make([]string, 0),
+		Choices: make([]Choice, 0),
 	}
 
 	configuration.Scaffold = []Subject{*mainSubject}
@@ -460,7 +460,7 @@ func TestSubject_IsValid(t *testing.T) {
 		MinN:      4,
 		MaxLength: 0,
 		Regex:     "",
-		Choices:   make([]string, 0),
+		Choices:   make([]Choice, 0),
 	}}
 
 	configuration.Scaffold = []Subject{*mainSubject}
diff --git a/integration/performance_test.go b/integration/performance_test.go
index 220418e8b..6b46c46e6 100644
--- a/integration/performance_test.go
+++ b/integration/performance_test.go
@@ -210,7 +210,7 @@ func createFormNChunks(m txManager, title types.Title, admin string, numChunks i
 					MinN:      0,
 					MaxLength: uint(base64.StdEncoding.DecodedLen(textSize)),
 					Regex:     "",
-					Choices:   []string{"Your fav snack: "},
+					Choices:   []types.Choice{{Choice: "Your fav snack: ", URL: ""}},
 				}},
 			},
 		},
diff --git a/internal/testing/fake/election.go b/internal/testing/fake/election.go
index 7b53d4764..65902d306 100644
--- a/internal/testing/fake/election.go
+++ b/internal/testing/fake/election.go
@@ -88,7 +88,7 @@ var BasicConfiguration = types.Configuration{
 					Title:   types.Title{En: "Select your favorite snacks", Fr: "", De: ""},
 					MaxN:    3,
 					MinN:    0,
-					Choices: []string{"snickers", "mars", "vodka", "babibel"},
+					Choices: []types.Choice{{Choice: "snickers", URL: ""}, {Choice: "mars", URL: ""}, {Choice: "vodka", URL: ""}, {Choice: "babibel", URL: ""}},
 				},
 			},
 			Ranks: []types.Rank{},
@@ -109,7 +109,7 @@ var BasicConfiguration = types.Configuration{
 					MinN:      1,
 					MaxLength: 3,
 					Regex:     "",
-					Choices:   []string{"write yes in your language"},
+					Choices:   []types.Choice{{Choice: "write yes in your language", URL: ""}},
 				},
 			},
 		},

From 414997950f7f82f61653217b4f14dcb98ce92852 Mon Sep 17 00:00:00 2001
From: Carine Dengler <git@carine-dengler.de>
Date: Mon, 26 Feb 2024 17:46:44 +0100
Subject: [PATCH 2/5] feat: add URL field to choices

---
 web/frontend/src/language/de.json             |   1 +
 web/frontend/src/language/en.json             |   1 +
 web/frontend/src/language/fr.json             |   1 +
 web/frontend/src/mocks/mockData.ts            |  79 ++++----
 .../src/pages/ballot/components/Rank.tsx      |  35 +++-
 .../src/pages/ballot/components/Select.tsx    |  26 ++-
 .../src/pages/ballot/components/Text.tsx      |  29 ++-
 .../form/components/AddQuestionModal.tsx      | 170 ++++++------------
 .../src/pages/form/components/RankResult.tsx  |  15 +-
 .../pages/form/components/SelectResult.tsx    |  33 ++--
 .../src/pages/form/components/TextResult.tsx  |   6 +-
 .../form/components/utils/countResult.ts      |   2 +-
 .../form/components/utils/useQuestionForm.ts  |  86 +++++----
 .../src/schema/configurationValidation.ts     |  25 ++-
 web/frontend/src/schema/form_conf.json        |  24 ++-
 web/frontend/src/types/configuration.ts       |  24 ++-
 web/frontend/src/types/getObjectType.ts       |  37 ++--
 .../tests/json/evoting/forms/canceled.json    |  35 +++-
 .../tests/json/evoting/forms/closed.json      |  35 +++-
 .../tests/json/evoting/forms/combined.json    |  35 +++-
 .../tests/json/evoting/forms/created.json     |  36 +++-
 .../tests/json/evoting/forms/decrypted.json   |  35 +++-
 .../tests/json/evoting/forms/open.json        |  35 +++-
 .../tests/json/evoting/forms/shuffled.json    |  35 +++-
 24 files changed, 525 insertions(+), 315 deletions(-)

diff --git a/web/frontend/src/language/de.json b/web/frontend/src/language/de.json
index f938a4333..30e6f332c 100644
--- a/web/frontend/src/language/de.json
+++ b/web/frontend/src/language/de.json
@@ -37,6 +37,7 @@
     "removetext": "Text entfernen",
     "subject": "Betreff",
     "choices": "Auswahlmöglichkeiten",
+    "url": "URL",
     "answers": "Antworten",
     "enterMaxLength": "Geben Sie die MaxLength",
     "maxChoices": "Maximale Anzahl von Auswahlmöglichkeiten",
diff --git a/web/frontend/src/language/en.json b/web/frontend/src/language/en.json
index 7f0a25b6e..ac964cafd 100644
--- a/web/frontend/src/language/en.json
+++ b/web/frontend/src/language/en.json
@@ -33,6 +33,7 @@
     "removetext": "Remove text",
     "subject": "Subject",
     "choices": "Choices",
+    "url": "URL",
     "answers": "Answers",
     "enterMaxLength": "Enter the MaxLength",
     "maxChoices": "Max number of choices",
diff --git a/web/frontend/src/language/fr.json b/web/frontend/src/language/fr.json
index d783e8c1d..d0ad19969 100644
--- a/web/frontend/src/language/fr.json
+++ b/web/frontend/src/language/fr.json
@@ -37,6 +37,7 @@
     "removetext": "Supprimer le texte",
     "subject": "Sujet",
     "choices": "Choix",
+    "url": "URL",
     "answers": "Réponses",
     "enterMaxLength": "Entrer la longueur max",
     "maxChoices": "Max nombre de choix",
diff --git a/web/frontend/src/mocks/mockData.ts b/web/frontend/src/mocks/mockData.ts
index a254e0871..6aa58feca 100644
--- a/web/frontend/src/mocks/mockData.ts
+++ b/web/frontend/src/mocks/mockData.ts
@@ -51,9 +51,9 @@ const mockForm1: any = {
               MaxN: 2,
               MinN: 1,
               Choices: [
-                '{"en": "tomato", "fr": "tomate", "de": "Tomate"}',
-                '{"en": "salad", "fr": "salade", "de": "Salat"}',
-                '{"en": "onion", "fr": "oignon", "de": "Zwiebel"}',
+                { Choice: '{"en": "tomato", "fr": "tomate", "de": "Tomate"}', URL: '' },
+                { Choice: '{"en": "salad", "fr": "salade", "de": "Salat"}', URL: '' },
+                { Choice: '{"en": "onion", "fr": "oignon", "de": "Zwiebel"}', URL: '' },
               ],
               Hint: { En: '', Fr: '', De: '' },
             },
@@ -69,9 +69,9 @@ const mockForm1: any = {
               MaxN: 3,
               MinN: 3,
               Choices: [
-                '{"en": "BC", "fr": "BC", "de": "BC"}',
-                '{"en": "SV", "fr": "SV", "de": "SV"}',
-                '{"en": "Parmentier", "fr": "Parmentier", "de": "Parmentier"}',
+                { Choice: '{"en": "BC", "fr": "BC", "de": "BC"}', URL: '' },
+                { Choice: '{"en": "SV", "fr": "SV", "de": "SV"}', URL: '' },
+                { Choice: '{"en": "Parmentier", "fr": "Parmentier", "de": "Parmentier"}', URL: '' },
               ],
               Hint: { En: '', Fr: '', De: '' },
             },
@@ -90,11 +90,11 @@ const mockForm1: any = {
           MaxN: 1,
           MinN: 1,
           Choices: [
-            '{"en":"1" ,"fr": "1", "de": "1"}',
-            '{"en":"2", "fr": "2", "de": "2"}',
-            '{"en":"3", "fr": "3", "de": "3"}',
-            '{"en":"4", "fr": "4", "de": "4"}',
-            '{ "en": "5", "fr": "5", "de": "5" }',
+            { Choice: '{"en":"1" ,"fr": "1", "de": "1"}', URL: '' },
+            { Choice: '{"en":"2", "fr": "2", "de": "2"}', URL: '' },
+            { Choice: '{"en":"3", "fr": "3", "de": "3"}', URL: '' },
+            { Choice: '{"en":"4", "fr": "4", "de": "4"}', URL: '' },
+            { Choice: '{ "en": "5", "fr": "5", "de": "5" }', URL: '' },
           ],
           Hint: { En: '', Fr: '', De: '' },
         },
@@ -108,9 +108,9 @@ const mockForm1: any = {
           MaxN: 1,
           MinN: 1,
           Choices: [
-            '{"en" : "bad", "fr": "mauvais", "de": "schlecht"}',
-            '{"en" : "normal", "fr": "normal", "de": "durchschnittlich"}',
-            '{"en" : "good", "fr": "super", "de": "gut"}',
+            { Choice: '{"en" : "bad", "fr": "mauvais", "de": "schlecht"}', URL: '' },
+            { Choice: '{"en" : "normal", "fr": "normal", "de": "durchschnittlich"}', URL: '' },
+            { Choice: '{"en" : "good", "fr": "super", "de": "gut"}', URL: '' },
           ],
           Hint: {
             En: 'Be honest. This is anonymous anyway',
@@ -132,8 +132,8 @@ const mockForm1: any = {
           MinN: 1,
           Regex: '',
           Choices: [
-            '{"en":"TA1", "fr": "TA1", "de": "TA1"}',
-            '{"en":"TA2", "fr":"TA2","de": "TA2"}',
+            { Choice: '{"en":"TA1", "fr": "TA1", "de": "TA1"}', URL: '' },
+            { Choice: '{"en":"TA2", "fr":"TA2","de": "TA2"}', URL: '' },
           ],
           Hint: { En: '', Fr: '', De: '' },
         },
@@ -191,11 +191,11 @@ const mockForm2: any = {
           MaxN: 1,
           MinN: 1,
           Choices: [
-            '{"en":"1" ,"fr": "1", "de": "1"}',
-            '{"en":"2", "fr": "2", "de": "2"}',
-            '{"en":"3", "fr": "3", "de": "3"}',
-            '{"en":"4", "fr": "4", "de": "4"}',
-            '{ "en": "5", "fr": "5", "de": "5" }',
+            { Choice: '{"en":"1" ,"fr": "1", "de": "1"}', URL: '' },
+            { Choice: '{"en":"2", "fr": "2", "de": "2"}', URL: '' },
+            { Choice: '{"en":"3", "fr": "3", "de": "3"}', URL: '' },
+            { Choice: '{"en":"4", "fr": "4", "de": "4"}', URL: '' },
+            { Choice: '{ "en": "5", "fr": "5", "de": "5" }', URL: '' },
           ],
           Hint: { En: '', Fr: '', De: '' },
         },
@@ -212,8 +212,8 @@ const mockForm2: any = {
           MaxN: 2,
           MinN: 2,
           Choices: [
-            '{"en":"TA1", "fr": "TA1", "de": "TA1"}',
-            '{"en":"TA2", "fr":"TA2","de": "TA2"}',
+            { Choice: '{"en":"TA1", "fr": "TA1", "de": "TA1"}', URL: '' },
+            { Choice: '{"en":"TA2", "fr":"TA2","de": "TA2"}', URL: '' },
           ],
           Regex: '^[A-Z][a-z]+$',
           Hint: { En: '', Fr: '', De: '' },
@@ -238,10 +238,10 @@ const mockForm2: any = {
           MaxN: 3,
           MinN: 0,
           Choices: [
-            '{"en": "tomato", "fr": "tomate", "de": "Tomate"}',
-            '{"en": "salad", "fr": "salade", "de": "Salat"}',
-            '{"en": "onion", "fr": "oignon", "de": "Zwiebel"}',
-            '{"en": "falafel", "fr": "falafel", "de": "Falafel"}',
+            { Choice: '{"en": "tomato", "fr": "tomate", "de": "Tomate"}', URL: '' },
+            { Choice: '{"en": "salad", "fr": "salade", "de": "Salat"}', URL: '' },
+            { Choice: '{"en": "onion", "fr": "oignon", "de": "Zwiebel"}', URL: '' },
+            { Choice: '{"en": "falafel", "fr": "falafel", "de": "Falafel"}', URL: '' },
           ],
           Hint: { En: '', Fr: '', De: '' },
         },
@@ -258,10 +258,14 @@ const mockForm2: any = {
           MaxN: 4,
           MinN: 1,
           Choices: [
-            '{"en": "Esplanade", "fr": "Esplanade", "de": "Esplanade"}',
-            '{"en": "Giacometti", "fr": "Giacometti", "de": "Giacometti"}',
-            '{"en": "Arcadie", "fr": "Arcadie", "de": "Arcadie"}',
-            '{"en": "Montreux Jazz Cafe", "fr": "Montreux Jazz Cafe", "de": "Montreux Jazz Cafe"}',
+            { Choice: '{"en": "Esplanade", "fr": "Esplanade", "de": "Esplanade"}', URL: '' },
+            { Choice: '{"en": "Giacometti", "fr": "Giacometti", "de": "Giacometti"}', URL: '' },
+            { Choice: '{"en": "Arcadie", "fr": "Arcadie", "de": "Arcadie"}', URL: '' },
+            {
+              Choice:
+                '{"en": "Montreux Jazz Cafe", "fr": "Montreux Jazz Cafe", "de": "Montreux Jazz Cafe"}',
+              URL: '',
+            },
           ],
           Hint: { En: '', Fr: '', De: '' },
         },
@@ -270,7 +274,10 @@ const mockForm2: any = {
           ID: (0xbeef).toString(),
           MaxN: 2,
           MinN: 1,
-          Choices: ['{"en": "IN", "fr": "IN", "de": "IN"}', '{"en": "SC", "fr": "SC", "de": "SC"}'],
+          Choices: [
+            { Choice: '{"en": "IN", "fr": "IN", "de": "IN"}', URL: '' },
+            { Choice: '{"en": "SC", "fr": "SC", "de": "SC"}', URL: '' },
+          ],
           Hint: {
             En: 'The right answer is IN ;-)',
             Fr: 'La bonne réponse est IN ;-)',
@@ -310,10 +317,10 @@ const mockForm3: any = {
           MaxLength: 50,
           Regex: '',
           Choices: [
-            '{"en": "Firstname", "fr": "Prénom", "de": "Firstname"}',
-            '{"en": "Main 🍕", "fr" : "Principal 🍕", "de": "Main 🍕"}',
-            '{"en": "Drink 🧃", "fr": "Boisson 🧃", "de": "Drink 🧃"}',
-            '{"en":"Dessert 🍰", "fr": "Dessert 🍰", "de": "Nachtisch 🍰"}',
+            { Choice: '{"en": "Firstname", "fr": "Prénom", "de": "Firstname"}', URL: '' },
+            { Choice: '{"en": "Main 🍕", "fr" : "Principal 🍕", "de": "Main 🍕"}', URL: '' },
+            { Choice: '{"en": "Drink 🧃", "fr": "Boisson 🧃", "de": "Drink 🧃"}', URL: '' },
+            { Choice: '{"en":"Dessert 🍰", "fr": "Dessert 🍰", "de": "Nachtisch 🍰"}', URL: '' },
           ],
           Hint: {
             En: 'If you change opinion call me before 11:30 a.m.',
diff --git a/web/frontend/src/pages/ballot/components/Rank.tsx b/web/frontend/src/pages/ballot/components/Rank.tsx
index 9bf4f9016..4091a67be 100644
--- a/web/frontend/src/pages/ballot/components/Rank.tsx
+++ b/web/frontend/src/pages/ballot/components/Rank.tsx
@@ -61,7 +61,14 @@ const Rank: FC<RankProps> = ({ rank, answers, language }) => {
   useEffect(() => {
     setTitles(rank.Title);
   }, [rank]);
-  const choiceDisplay = (choice: string, rankIndex: number) => {
+  const choiceDisplay = (choice: string, url: string, rankIndex: number) => {
+    const prettyChoice = url ? (
+      <a href={url} style={{ color: 'blue', textDecoration: 'underline' }}>
+        {choice}
+      </a>
+    ) : (
+      choice
+    );
     return (
       <Draggable key={choice} draggableId={choice} index={rankIndex}>
         {(provided) => (
@@ -74,7 +81,7 @@ const Rank: FC<RankProps> = ({ rank, answers, language }) => {
             <div className="flex justify-between py-4 text-sm text-gray-900">
               <p className="flex-none mx-5 rounded text-center text-gray-400">{rankIndex + 1}</p>
               <div className="flex-auto w-80 overflow-y-auto break-words pr-4 text-gray-600">
-                {choice}
+                {prettyChoice}
               </div>
               <RankListIcon />
             </div>
@@ -102,13 +109,25 @@ const Rank: FC<RankProps> = ({ rank, answers, language }) => {
               <ul className={rank.ID} {...provided.droppableProps} ref={provided.innerRef}>
                 {Array.from(answers.RankAnswers.get(rank.ID).entries())
                   .map(([rankIndex, choiceIndex]) => {
-                    if (language === 'fr' && rank.ChoicesMap.has('fr'))
-                      return choiceDisplay(rank.ChoicesMap.get('fr')[choiceIndex], rankIndex);
-                    else if (language === 'de' && rank.ChoicesMap.has('de'))
-                      return choiceDisplay(rank.ChoicesMap.get('de')[choiceIndex], rankIndex);
-                    else if (rank.ChoicesMap.has('en'))
+                    if (language === 'fr' && rank.ChoicesMap.ChoicesMap.has('fr'))
+                      return choiceDisplay(
+                        rank.ChoicesMap.ChoicesMap.get('fr')[choiceIndex],
+                        rank.ChoicesMap.URLs[choiceIndex],
+                        rankIndex
+                      );
+                    else if (language === 'de' && rank.ChoicesMap.ChoicesMap.has('de'))
+                      return choiceDisplay(
+                        rank.ChoicesMap.ChoicesMap.get('de')[choiceIndex],
+                        rank.ChoicesMap.URLs[choiceIndex],
+                        rankIndex
+                      );
+                    else if (rank.ChoicesMap.ChoicesMap.has('en'))
                       // 'en' is the default language
-                      return choiceDisplay(rank.ChoicesMap.get('en')[choiceIndex], rankIndex);
+                      return choiceDisplay(
+                        rank.ChoicesMap.ChoicesMap.get('en')[choiceIndex],
+                        rank.ChoicesMap.URLs[choiceIndex],
+                        rankIndex
+                      );
                     return undefined;
                   })
                   .filter((e) => e !== undefined)}
diff --git a/web/frontend/src/pages/ballot/components/Select.tsx b/web/frontend/src/pages/ballot/components/Select.tsx
index 8b3c2c7a6..211dbe019 100644
--- a/web/frontend/src/pages/ballot/components/Select.tsx
+++ b/web/frontend/src/pages/ballot/components/Select.tsx
@@ -60,7 +60,14 @@ const Select: FC<SelectProps> = ({ select, answers, setAnswers, language }) => {
     setTitles(select.Title);
   }, [select]);
 
-  const choiceDisplay = (isChecked: boolean, choice: string, choiceIndex: number) => {
+  const choiceDisplay = (isChecked: boolean, choice: string, url: string, choiceIndex: number) => {
+    const prettyChoice = url ? (
+      <a href={url} style={{ color: 'blue', textDecoration: 'underline' }}>
+        {choice}
+      </a>
+    ) : (
+      choice
+    );
     return (
       <div key={choice}>
         <input
@@ -72,7 +79,7 @@ const Select: FC<SelectProps> = ({ select, answers, setAnswers, language }) => {
           onChange={(e) => handleChecks(e, choiceIndex)}
         />
         <label htmlFor={choice} className="pl-2 break-words text-gray-600 cursor-pointer">
-          {choice}
+          {prettyChoice}
         </label>
       </div>
     );
@@ -93,22 +100,25 @@ const Select: FC<SelectProps> = ({ select, answers, setAnswers, language }) => {
       <div className="sm:pl-8 mt-2 pl-6">
         {Array.from(answers.SelectAnswers.get(select.ID).entries())
           .map(([choiceIndex, isChecked]) => {
-            if (language === 'fr' && select.ChoicesMap.has('fr'))
+            if (language === 'fr' && select.ChoicesMap.ChoicesMap.has('fr'))
               return choiceDisplay(
                 isChecked,
-                select.ChoicesMap.get('fr')[choiceIndex],
+                select.ChoicesMap.ChoicesMap.get('fr')[choiceIndex],
+                select.ChoicesMap.URLs[choiceIndex],
                 choiceIndex
               );
-            else if (language === 'de' && select.ChoicesMap.has('de'))
+            else if (language === 'de' && select.ChoicesMap.ChoicesMap.has('de'))
               return choiceDisplay(
                 isChecked,
-                select.ChoicesMap.get('de')[choiceIndex],
+                select.ChoicesMap.ChoicesMap.get('de')[choiceIndex],
+                select.ChoicesMap.URLs[choiceIndex],
                 choiceIndex
               );
-            else if (select.ChoicesMap.has('en'))
+            else if (select.ChoicesMap.ChoicesMap.has('en'))
               return choiceDisplay(
                 isChecked,
-                select.ChoicesMap.get('en')[choiceIndex],
+                select.ChoicesMap.ChoicesMap.get('en')[choiceIndex],
+                select.ChoicesMap.URLs[choiceIndex],
                 choiceIndex
               );
             return undefined;
diff --git a/web/frontend/src/pages/ballot/components/Text.tsx b/web/frontend/src/pages/ballot/components/Text.tsx
index 3358d0784..f8a9635e0 100644
--- a/web/frontend/src/pages/ballot/components/Text.tsx
+++ b/web/frontend/src/pages/ballot/components/Text.tsx
@@ -78,12 +78,19 @@ const Text: FC<TextProps> = ({ text, answers, setAnswers, language }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [answers]);
 
-  const choiceDisplay = (choice: string, choiceIndex: number) => {
+  const choiceDisplay = (choice: string, url: string, choiceIndex: number) => {
     const columns = text.MaxLength > 50 ? 50 : text.MaxLength;
+    const prettyChoice = url ? (
+      <a href={url} style={{ color: 'blue', textDecoration: 'underline' }}>
+        {choice}
+      </a>
+    ) : (
+      choice
+    );
     return (
       <div className="flex mb-2  md:flex-row flex-col" key={choice}>
         <label htmlFor={choice} className="text-gray-600 mr-2 w-24 break-words text-md">
-          {choice + ': '}
+          {prettyChoice}:
         </label>
 
         <textarea
@@ -110,19 +117,25 @@ const Text: FC<TextProps> = ({ text, answers, setAnswers, language }) => {
         </div>
       </div>
       <div className="pt-1">{requirementsDisplay()}</div>
-      {language === 'en' && text.ChoicesMap.has('en') && (
+      {language === 'en' && text.ChoicesMap.ChoicesMap.has('en') && (
         <div className="sm:pl-8 mt-2 pl-6">
-          {text.ChoicesMap.get('en').map((choice, index) => choiceDisplay(choice, index))}
+          {text.ChoicesMap.ChoicesMap.get('en').map((choice, index) =>
+            choiceDisplay(choice, text.ChoicesMap.URLs[index], index)
+          )}
         </div>
       )}
-      {language === 'fr' && text.ChoicesMap.has('fr') && (
+      {language === 'fr' && text.ChoicesMap.ChoicesMap.has('fr') && (
         <div className="sm:pl-8 mt-2 pl-6">
-          {text.ChoicesMap.get('fr').map((choice, index) => choiceDisplay(choice, index))}
+          {text.ChoicesMap.ChoicesMap.get('fr').map((choice, index) =>
+            choiceDisplay(choice, text.ChoicesMap.URLs[index], index)
+          )}
         </div>
       )}
-      {language === 'de' && text.ChoicesMap.has('de') && (
+      {language === 'de' && text.ChoicesMap.ChoicesMap.has('de') && (
         <div className="sm:pl-8 mt-2 pl-6">
-          {text.ChoicesMap.get('de').map((choice, index) => choiceDisplay(choice, index))}
+          {text.ChoicesMap.ChoicesMap.get('de').map((choice, index) =>
+            choiceDisplay(choice, text.ChoicesMap.URLs[index], index)
+          )}
         </div>
       )}
       <div className="text-red-600 text-sm py-2 sm:pl-2 pl-1">{answers.Errors.get(text.ID)}</div>
diff --git a/web/frontend/src/pages/form/components/AddQuestionModal.tsx b/web/frontend/src/pages/form/components/AddQuestionModal.tsx
index 228bc97ab..4a9c5b830 100644
--- a/web/frontend/src/pages/form/components/AddQuestionModal.tsx
+++ b/web/frontend/src/pages/form/components/AddQuestionModal.tsx
@@ -43,6 +43,7 @@ const AddQuestionModal: FC<AddQuestionModalProps> = ({
     addChoice,
     deleteChoice,
     updateChoice,
+    updateURL,
   } = useQuestionForm(question);
   const [language, setLanguage] = useState('en');
   const { Title, MaxN, MinN, ChoicesMap, Hint } = values;
@@ -132,6 +133,9 @@ const AddQuestionModal: FC<AddQuestionModalProps> = ({
         return;
     }
   };
+  const choices = ChoicesMap.ChoicesMap.has(language)
+    ? ChoicesMap.ChoicesMap.get(language)
+    : ChoicesMap.ChoicesMap.get('en');
 
   return (
     <Transition.Root show={open} as={Fragment}>
@@ -177,7 +181,7 @@ const AddQuestionModal: FC<AddQuestionModalProps> = ({
               </div>
               <div className="pb-6 pr-6 pl-6">
                 <div className="flex flex-col sm:flex-row sm:min-h-[18rem] ">
-                  <div className="flex flex-col w-[55%]">
+                  <div className="flex flex-col w-[85%]">
                     <LanguageButtons
                       availableLanguages={availableLanguages}
                       setLanguage={setLanguage}
@@ -263,124 +267,52 @@ const AddQuestionModal: FC<AddQuestionModalProps> = ({
                     <label className="flex pt-2 text-md font-medium text-gray-500">
                       {Type !== TEXT ? t('choices') : t('answers')}
                     </label>
-
-                    {language === 'en' && (
-                      <div className="pb-2">
-                        {ChoicesMap.get('en').map((choice: string, idx: number) => (
-                          <div className="flex w-60" key={`${ID}wrapper${idx}`}>
-                            <input
-                              key={`${ID}choice${idx}`}
-                              value={choice}
-                              onChange={updateChoice(idx, language)}
-                              name="Choice"
-                              type="text"
-                              placeholder={
-                                Type !== TEXT ? `${t('choices')} ${idx + 1}` : `Answer ${idx + 1}`
-                              }
-                              className="my-1 px-1 w-60 ml-2 border rounded-md"
-                            />
-                            <div className="flex ml-1 mt-1.2">
-                              {ChoicesMap.get('en').length > 1 && (
-                                <button
-                                  key={`${ID}deleteChoice${idx}`}
-                                  type="button"
-                                  className="inline-flex items-center border border-transparent rounded-full font-medium text-gray-300 hover:text-gray-400"
-                                  onClick={handleDeleteChoice(idx)}>
-                                  <MinusCircleIcon className="h-5 w-5" aria-hidden="true" />
-                                </button>
-                              )}
-                              {idx === ChoicesMap.get('en').length - 1 && (
-                                <button
-                                  key={`${ID}addChoice${idx}`}
-                                  type="button"
-                                  className="inline-flex items-center border border-transparent rounded-full font-medium text-green-600 hover:text-green-800"
-                                  onClick={handleAddChoice}>
-                                  <PlusCircleIcon className="h-5 w-5" aria-hidden="true" />
-                                </button>
-                              )}
-                            </div>
-                          </div>
-                        ))}
-                      </div>
-                    )}
-                    {language === 'fr' && (
-                      <div className="pb-2">
-                        {ChoicesMap.get('fr').map((choice: string, idx: number) => (
-                          <div className="flex w-60" key={`${ID}wrapper${idx}`}>
-                            <input
-                              key={`${ID}choice${idx}`}
-                              value={choice}
-                              onChange={updateChoice(idx, language)}
-                              name="Choice"
-                              type="text"
-                              placeholder={
-                                Type !== TEXT ? `${t('choices')} ${idx + 1}` : `Answer ${idx + 1}`
-                              }
-                              className="my-1 px-1 w-60 ml-2 border rounded-md"
-                            />
-                            <div className="flex ml-1 mt-1.2">
-                              {ChoicesMap.get('fr').length > 1 && (
-                                <button
-                                  key={`${ID}deleteChoice${idx}`}
-                                  type="button"
-                                  className="inline-flex items-center border border-transparent rounded-full font-medium text-gray-300 hover:text-gray-400"
-                                  onClick={handleDeleteChoice(idx)}>
-                                  <MinusCircleIcon className="h-5 w-5" aria-hidden="true" />
-                                </button>
-                              )}
-                              {idx === ChoicesMap.get('fr').length - 1 && (
-                                <button
-                                  key={`${ID}addChoice${idx}`}
-                                  type="button"
-                                  className="inline-flex items-center border border-transparent rounded-full font-medium text-green-600 hover:text-green-800"
-                                  onClick={handleAddChoice}>
-                                  <PlusCircleIcon className="h-5 w-5" aria-hidden="true" />
-                                </button>
-                              )}
-                            </div>
+                    <div className="pb-2">
+                      {choices.map((choice, idx) => (
+                        <div className="flex w-60" key={`${ID}wrapper${idx}`}>
+                          <input
+                            key={`${ID}choice${idx}`}
+                            value={choice}
+                            onChange={updateChoice(idx, language)}
+                            name="Choice"
+                            type="text"
+                            placeholder={
+                              Type !== TEXT ? `${t('choices')} ${idx + 1}` : `Answer ${idx + 1}`
+                            }
+                            className="my-1 px-1 w-60 ml-2 border rounded-md"
+                          />
+                          <input
+                            key={`${ID}url${idx}`}
+                            value={ChoicesMap.URLs[idx]}
+                            onChange={updateURL(idx)}
+                            name="URL"
+                            type="text"
+                            placeholder={`${t('url')} ${idx + 1}`}
+                            className="my-1 px-1 w-60 ml-2 border rounded-md"
+                          />
+                          <div className="flex ml-1 mt-1.2">
+                            {choices.length > 1 && (
+                              <button
+                                key={`${ID}deleteChoice${idx}`}
+                                type="button"
+                                className="inline-flex items-center border border-transparent rounded-full font-medium text-gray-300 hover:text-gray-400"
+                                onClick={handleDeleteChoice(idx)}>
+                                <MinusCircleIcon className="h-5 w-5" aria-hidden="true" />
+                              </button>
+                            )}
+                            {idx === choices.length - 1 && (
+                              <button
+                                key={`${ID}addChoice${idx}`}
+                                type="button"
+                                className="inline-flex items-center border border-transparent rounded-full font-medium text-green-600 hover:text-green-800"
+                                onClick={handleAddChoice}>
+                                <PlusCircleIcon className="h-5 w-5" aria-hidden="true" />
+                              </button>
+                            )}
                           </div>
-                        ))}
-                      </div>
-                    )}
-                    {language === 'de' && (
-                      <div className="pb-2">
-                        {ChoicesMap.get('de').map((choice: string, idx: number) => (
-                          <div className="flex w-60" key={`${ID}wrapper${idx}`}>
-                            <input
-                              key={`${ID}choice${idx}`}
-                              value={choice}
-                              onChange={updateChoice(idx, language)}
-                              name="Choice"
-                              type="text"
-                              placeholder={
-                                Type !== TEXT ? `${t('choices')} ${idx + 1}` : `Answer ${idx + 1}`
-                              }
-                              className="my-1 px-1 w-60 ml-2 border rounded-md"
-                            />
-                            <div className="flex ml-1 mt-1.2">
-                              {ChoicesMap.get('de').length > 1 && (
-                                <button
-                                  key={`${ID}deleteChoice${idx}`}
-                                  type="button"
-                                  className="inline-flex items-center border border-transparent rounded-full font-medium text-gray-300 hover:text-gray-400"
-                                  onClick={handleDeleteChoice(idx)}>
-                                  <MinusCircleIcon className="h-5 w-5" aria-hidden="true" />
-                                </button>
-                              )}
-                              {idx === ChoicesMap.get('de').length - 1 && (
-                                <button
-                                  key={`${ID}addChoice${idx}`}
-                                  type="button"
-                                  className="inline-flex items-center border border-transparent rounded-full font-medium text-green-600 hover:text-green-800"
-                                  onClick={handleAddChoice}>
-                                  <PlusCircleIcon className="h-5 w-5" aria-hidden="true" />
-                                </button>
-                              )}
-                            </div>
-                          </div>
-                        ))}
-                      </div>
-                    )}
+                        </div>
+                      ))}
+                    </div>
                     <div className="text-red-600">
                       {errors
                         .filter((err) => err.startsWith('Choices'))
@@ -389,7 +321,7 @@ const AddQuestionModal: FC<AddQuestionModalProps> = ({
                         ))}
                     </div>
                   </div>
-                  <div className="w-[45%]">
+                  <div className="w-[20%]">
                     {Type !== RANK && (
                       <>
                         <div className="pb-4">{t('additionalProperties')} </div>
diff --git a/web/frontend/src/pages/form/components/RankResult.tsx b/web/frontend/src/pages/form/components/RankResult.tsx
index a3a07d168..ef8d56466 100644
--- a/web/frontend/src/pages/form/components/RankResult.tsx
+++ b/web/frontend/src/pages/form/components/RankResult.tsx
@@ -21,9 +21,9 @@ const RankResult: FC<RankResultProps> = ({ rank, rankResult }) => {
         <React.Fragment key={index}>
           <div className="px-2 sm:px-4 break-words max-w-xs w-max">
             <span>
-              {i18n.language === 'en' && rank.ChoicesMap.get('en')[index]}
-              {i18n.language === 'fr' && rank.ChoicesMap.get('fr')[index]}
-              {i18n.language === 'de' && rank.ChoicesMap.get('de')[index]}
+              {i18n.language === 'en' && rank.ChoicesMap.ChoicesMap.get('en')[index]}
+              {i18n.language === 'fr' && rank.ChoicesMap.ChoicesMap.get('fr')[index]}
+              {i18n.language === 'de' && rank.ChoicesMap.ChoicesMap.get('de')[index]}
             </span>
             :
           </div>
@@ -49,9 +49,12 @@ export const IndividualRankResult: FC<RankResultProps> = ({ rank, rankResult })
             <div className="flex flex-row px-2 sm:px-4 break-words max-w-xs w-max">
               <div className="mr-2 font-bold">{index + 1}:</div>
               <div>
-                {i18n.language === 'en' && rank.ChoicesMap.get('en')[rankResult[0].indexOf(index)]}
-                {i18n.language === 'fr' && rank.ChoicesMap.get('fr')[rankResult[0].indexOf(index)]}
-                {i18n.language === 'de' && rank.ChoicesMap.get('de')[rankResult[0].indexOf(index)]}
+                {i18n.language === 'en' &&
+                  rank.ChoicesMap.ChoicesMap.get('en')[rankResult[0].indexOf(index)]}
+                {i18n.language === 'fr' &&
+                  rank.ChoicesMap.ChoicesMap.get('fr')[rankResult[0].indexOf(index)]}
+                {i18n.language === 'de' &&
+                  rank.ChoicesMap.ChoicesMap.get('de')[rankResult[0].indexOf(index)]}
               </div>
             </div>
           </React.Fragment>
diff --git a/web/frontend/src/pages/form/components/SelectResult.tsx b/web/frontend/src/pages/form/components/SelectResult.tsx
index 1dc49ffc2..bf86f6322 100644
--- a/web/frontend/src/pages/form/components/SelectResult.tsx
+++ b/web/frontend/src/pages/form/components/SelectResult.tsx
@@ -9,6 +9,22 @@ type SelectResultProps = {
   selectResult: number[][];
 };
 
+const prettifyChoice = (select, index) => {
+  const choice = (
+    select.ChoicesMap.ChoicesMap.has(i18n.language)
+      ? select.ChoicesMap.ChoicesMap.get(i18n.language)
+      : select.ChoicesMap.ChoicesMap.get('en')
+  )[index];
+  const url = select.ChoicesMap.URLs[index];
+  return url ? (
+    <a href={url} style={{ color: 'blue', textDecoration: 'underline' }}>
+      {choice}
+    </a>
+  ) : (
+    choice
+  );
+};
+
 // Display the results of a select question.
 const SelectResult: FC<SelectResultProps> = ({ select, selectResult }) => {
   const sortedResults = countSelectResult(selectResult)
@@ -24,14 +40,7 @@ const SelectResult: FC<SelectResultProps> = ({ select, selectResult }) => {
       return (
         <React.Fragment key={index}>
           <div className="px-2 sm:px-4 break-words max-w-xs w-max">
-            <span>
-              {
-                (select.ChoicesMap.has(i18n.language)
-                  ? select.ChoicesMap.get(i18n.language)
-                  : select.ChoicesMap.get('en'))[origIndex]
-              }
-            </span>
-            :
+            <span>{prettifyChoice(select, origIndex)}</span>:
           </div>
           <SelectProgressBar
             percent={percent}
@@ -65,13 +74,7 @@ export const IndividualSelectResult: FC<SelectResultProps> = ({ select, selectRe
           <React.Fragment key={`select_${index}`}>
             <div className="flex flex-row px-2 sm:px-4 break-words max-w-xs w-max">
               <div className="h-4 w-4 mr-2 accent-indigo-500 ">{displayChoices(result, index)}</div>
-              <div>
-                {
-                  (select.ChoicesMap.has(i18n.language)
-                    ? select.ChoicesMap.get(i18n.language)
-                    : select.ChoicesMap.get('en'))[index]
-                }
-              </div>
+              <div>{prettifyChoice(select, index)}</div>
             </div>
           </React.Fragment>
         );
diff --git a/web/frontend/src/pages/form/components/TextResult.tsx b/web/frontend/src/pages/form/components/TextResult.tsx
index 059f4d127..0c7900031 100644
--- a/web/frontend/src/pages/form/components/TextResult.tsx
+++ b/web/frontend/src/pages/form/components/TextResult.tsx
@@ -46,9 +46,9 @@ export const IndividualTextResult: FC<IndividualTextResultProps> = ({ text, text
           <React.Fragment key={`txt_${index}`}>
             <div className="flex flex-row px-2 sm:px-4 break-words max-w-xs w-max">
               <div className="mr-2 font-bold">
-                {i18n.language === 'en' && text.ChoicesMap.get('en')[index]}
-                {i18n.language === 'fr' && text.ChoicesMap.get('fr')[index]}
-                {i18n.language === 'de' && text.ChoicesMap.get('de')[index]}:
+                {i18n.language === 'en' && text.ChoicesMap.ChoicesMap.get('en')[index]}
+                {i18n.language === 'fr' && text.ChoicesMap.ChoicesMap.get('fr')[index]}
+                {i18n.language === 'de' && text.ChoicesMap.ChoicesMap.get('de')[index]}:
               </div>
               <div>{result}</div>
             </div>
diff --git a/web/frontend/src/pages/form/components/utils/countResult.ts b/web/frontend/src/pages/form/components/utils/countResult.ts
index f2803bd65..ca7fdfa11 100644
--- a/web/frontend/src/pages/form/components/utils/countResult.ts
+++ b/web/frontend/src/pages/form/components/utils/countResult.ts
@@ -9,7 +9,7 @@ const countRankResult = (rankResult: number[][], rank: RankQuestion) => {
   const minIndices: number[] = [];
   // the maximum score achievable is (number of choices - 1) * number of ballots
 
-  let min = (rank.ChoicesMap.get('en').length - 1) * rankResult.length;
+  let min = (rank.ChoicesMap.ChoicesMap.get('en').length - 1) * rankResult.length;
 
   const results = rankResult.reduce((a, b) => {
     return a.map((value, index) => {
diff --git a/web/frontend/src/pages/form/components/utils/useQuestionForm.ts b/web/frontend/src/pages/form/components/utils/useQuestionForm.ts
index 576012568..4e1a1ee10 100644
--- a/web/frontend/src/pages/form/components/utils/useQuestionForm.ts
+++ b/web/frontend/src/pages/form/components/utils/useQuestionForm.ts
@@ -14,7 +14,7 @@ const useQuestionForm = (initState: RankQuestion | SelectQuestion | TextQuestion
   const handleChange =
     (Exception?: string, optionnalValues?: number) => (e?: React.ChangeEvent<HTMLInputElement>) => {
       const { value, type, name } = e.target;
-      const obj = Object.fromEntries(ChoicesMap);
+      const obj = Object.fromEntries(ChoicesMap.ChoicesMap);
       const newChoicesMap = new Map(Object.entries(obj));
       newChoicesMap.set('en', [...newChoicesMap.get('en'), '']);
       newChoicesMap.set('fr', [...newChoicesMap.get('fr'), '']);
@@ -32,31 +32,34 @@ const useQuestionForm = (initState: RankQuestion | SelectQuestion | TextQuestion
         case 'addChoiceRank':
           setState({
             ...state,
-            ChoicesMap: newChoicesMap,
+            ChoicesMap: { ChoicesMap: newChoicesMap, URLs: [...ChoicesMap.URLs, ''] },
             MaxN: Math.max(
-              ChoicesMap.get('en').length + 1,
-              ChoicesMap.get('fr').length + 1,
-              ChoicesMap.get('de').length + 1
+              ChoicesMap.ChoicesMap.get('en').length + 1,
+              ChoicesMap.ChoicesMap.get('fr').length + 1,
+              ChoicesMap.ChoicesMap.get('de').length + 1
             ),
             MinN: Math.min(
-              ChoicesMap.get('en').length + 1,
-              ChoicesMap.get('fr').length + 1,
-              ChoicesMap.get('de').length + 1
+              ChoicesMap.ChoicesMap.get('en').length + 1,
+              ChoicesMap.ChoicesMap.get('fr').length + 1,
+              ChoicesMap.ChoicesMap.get('de').length + 1
             ),
           });
           break;
         case 'deleteChoiceRank':
           lang.forEach((lg) => {
-            const filteredChoicesMap = ChoicesMap.get(lg).filter(
+            const filteredChoicesMap = ChoicesMap.ChoicesMap.get(lg).filter(
               (item: string, idx: number) => idx !== optionnalValues
             );
-            ChoicesMap.set(lg, filteredChoicesMap);
+            ChoicesMap.ChoicesMap.set(lg, filteredChoicesMap);
           });
+          ChoicesMap.URLs = ChoicesMap.URLs.filter(
+            (item: string, idx: number) => idx !== optionnalValues
+          );
           setState({
             ...state,
             ChoicesMap: ChoicesMap,
-            MaxN: ChoicesMap.get('en').length,
-            MinN: ChoicesMap.get('en').length,
+            MaxN: ChoicesMap.ChoicesMap.get('en').length,
+            MinN: ChoicesMap.ChoicesMap.get('en').length,
           });
           break;
         case 'TextMaxLength':
@@ -82,21 +85,27 @@ const useQuestionForm = (initState: RankQuestion | SelectQuestion | TextQuestion
 
   // updates the ChoicesMap map when the user adds a new choice
   const addChoice = (lg) => {
-    const obj = Object.fromEntries(ChoicesMap);
+    const obj = Object.fromEntries(ChoicesMap.ChoicesMap);
     const newChoicesMap = new Map(Object.entries(obj));
     switch (lg) {
       case lg:
         setState({
           ...state,
-          ChoicesMap: newChoicesMap.set(lg, [...newChoicesMap.get(lg), '']),
-          MaxN: ChoicesMap.get(lg).length + 1,
+          ChoicesMap: {
+            ChoicesMap: newChoicesMap.set(lg, [...newChoicesMap.get(lg), '']),
+            URLs: [...ChoicesMap.URLs, ''],
+          },
+          MaxN: ChoicesMap.ChoicesMap.get(lg).length + 1,
         });
         break;
       default:
         setState({
           ...state,
-          ChoicesMap: newChoicesMap.set('en', [...newChoicesMap.get('en'), '']),
-          MaxN: ChoicesMap.get('en').length + 1,
+          ChoicesMap: {
+            ChoicesMap: newChoicesMap.set('en', [...newChoicesMap.get('en'), '']),
+            URLs: [...ChoicesMap.URLs, ''],
+          },
+          MaxN: ChoicesMap.ChoicesMap.get('en').length + 1,
         });
     }
   };
@@ -104,17 +113,18 @@ const useQuestionForm = (initState: RankQuestion | SelectQuestion | TextQuestion
   // remove a choice from the ChoicesMap map
   const deleteChoice = (index: number) => {
     lang.forEach((lg) => {
-      if (ChoicesMap.get(lg).length > MinN) {
-        const filteredChoicesMap = ChoicesMap.get(lg).filter(
-          (item: string, idx: number) => idx !== index
+      if (ChoicesMap.ChoicesMap.get(lg).length > MinN) {
+        ChoicesMap.ChoicesMap.set(
+          lg,
+          ChoicesMap.ChoicesMap.get(lg).filter((item: string, idx: number) => idx !== index)
         );
-        ChoicesMap.set(lg, filteredChoicesMap);
+        ChoicesMap.URLs = ChoicesMap.URLs.filter((item: string, idx: number) => idx !== index);
       }
     });
     const maxN = Math.max(
-      ChoicesMap.get('en').length + 1,
-      ChoicesMap.get('fr').length + 1,
-      ChoicesMap.get('de').length + 1
+      ChoicesMap.ChoicesMap.get('en').length + 1,
+      ChoicesMap.ChoicesMap.get('fr').length + 1,
+      ChoicesMap.ChoicesMap.get('de').length + 1
     );
     setState({
       ...state,
@@ -126,7 +136,7 @@ const useQuestionForm = (initState: RankQuestion | SelectQuestion | TextQuestion
   // update the choice at the given index
   const updateChoice = (index: number, lg: string) => (e) => {
     e.persist();
-    const obj = Object.fromEntries(ChoicesMap);
+    const obj = Object.fromEntries(ChoicesMap.ChoicesMap);
     switch (lg) {
       case lg:
         const newChoicesMap = new Map(
@@ -139,8 +149,8 @@ const useQuestionForm = (initState: RankQuestion | SelectQuestion | TextQuestion
         );
         setState({
           ...state,
-          ChoicesMap: newChoicesMap,
-          Choices: choicesMapToChoices(newChoicesMap),
+          ChoicesMap: { ChoicesMap: newChoicesMap, URLs: ChoicesMap.URLs },
+          Choices: choicesMapToChoices({ ChoicesMap: newChoicesMap, URLs: ChoicesMap.URLs }),
         });
         break;
 
@@ -153,12 +163,28 @@ const useQuestionForm = (initState: RankQuestion | SelectQuestion | TextQuestion
         );
         setState({
           ...state,
-          ChoicesMap: newChoicesMapDefault,
-          Choices: choicesMapToChoices(newChoicesMapDefault),
+          ChoicesMap: { ChoicesMap: newChoicesMapDefault, URLs: ChoicesMap.URLs },
+          Choices: choicesMapToChoices({ ChoicesMap: newChoicesMapDefault, URLs: ChoicesMap.URLs }),
         });
     }
   };
-  return { state, handleChange, addChoice, deleteChoice, updateChoice };
+
+  // update the URL
+  const updateURL = (index: number) => (e) => {
+    e.persist();
+    const newURLs = [
+      ...ChoicesMap.URLs.slice(0, index),
+      e.target.value,
+      ...ChoicesMap.URLs.slice(index + 1),
+    ];
+    setState({
+      ...state,
+      ChoicesMap: { ChoicesMap: ChoicesMap.ChoicesMap, URLs: newURLs },
+      Choices: choicesMapToChoices({ ChoicesMap: ChoicesMap.ChoicesMap, URLs: newURLs }),
+    });
+  };
+
+  return { state, handleChange, addChoice, deleteChoice, updateChoice, updateURL };
 };
 
 export default useQuestionForm;
diff --git a/web/frontend/src/schema/configurationValidation.ts b/web/frontend/src/schema/configurationValidation.ts
index c6c73fa15..81fabd359 100644
--- a/web/frontend/src/schema/configurationValidation.ts
+++ b/web/frontend/src/schema/configurationValidation.ts
@@ -84,7 +84,12 @@ const selectsSchema = yup.object({
     .required(),
   Choices: yup
     .array()
-    .of(yup.string())
+    .of(
+      yup.object({
+        Choice: yup.string(),
+        URL: yup.string(),
+      })
+    )
     .test({
       name: 'compare-choices-min-max',
       message: 'Choice length comparison failed',
@@ -98,7 +103,7 @@ const selectsSchema = yup.object({
             message: `Choices array length should be at least equal to Max in selects [objectID: ${ID}]`,
           });
         }
-        if (Choices.includes('')) {
+        if (Choices.some((choice) => choice.Choice === '')) {
           return this.createError({
             path,
             message: `Choices should not be empty in selects [objectID: ${ID}]`,
@@ -182,7 +187,12 @@ const ranksSchema = yup.object({
     .required(),
   Choices: yup
     .array()
-    .of(yup.string())
+    .of(
+      yup.object({
+        Choice: yup.string(),
+        URL: yup.string(),
+      })
+    )
     .test({
       name: 'compare-choices-min-max',
       message: 'Choice length comparison failed',
@@ -196,7 +206,7 @@ const ranksSchema = yup.object({
             message: `Choices array length should be equal to MaxN and MinN in ranks [objectID: ${ID}]`,
           });
         }
-        if (Choices.includes('')) {
+        if (Choices.some((choice) => choice.Choice === '')) {
           return this.createError({
             path,
             message: `Choices should not be empty in ranks [objectID: ${ID}]`,
@@ -308,7 +318,12 @@ const textsSchema = yup.object({
   Regex: yup.string().min(0),
   Choices: yup
     .array()
-    .of(yup.string())
+    .of(
+      yup.object({
+        Choice: yup.string(),
+        URL: yup.string(),
+      })
+    )
     .test({
       name: 'compare-choices-min-max',
       message: 'Choice length comparison failed',
diff --git a/web/frontend/src/schema/form_conf.json b/web/frontend/src/schema/form_conf.json
index a18507537..4b4d0a832 100644
--- a/web/frontend/src/schema/form_conf.json
+++ b/web/frontend/src/schema/form_conf.json
@@ -50,7 +50,13 @@
                 "MinN": { "type": "number" },
                 "Choices": {
                   "type": "array",
-                  "items": { "type": "string" }
+                  "items": {
+                    "type": "object",
+                    "properties": {
+                       "Choice": { "type": "string" },
+                       "URL": { "type": "string" }
+                    }
+                  }
                 },
                 "Hint": {
                   "type": "object",
@@ -83,7 +89,13 @@
                 "MinN": { "type": "number" },
                 "Choices": {
                   "type": "array",
-                  "items": { "type": "string" }
+                  "items": {
+                    "type": "object",
+                    "properties": {
+                       "Choice": { "type": "string" },
+                       "URL": { "type": "string" }
+                    }
+                  }
                 },
                 "Hint": {
                   "type": "object",
@@ -118,7 +130,13 @@
                 "MaxLength": { "type": "number" },
                 "Choices": {
                   "type": "array",
-                  "items": { "type": "string" }
+                  "items": {
+                    "type": "object",
+                    "properties": {
+                       "Choice": { "type": "string" },
+                       "URL": { "type": "string" }
+                    }
+                  }
                 },
                 "Hint": {
                   "type": "object",
diff --git a/web/frontend/src/types/configuration.ts b/web/frontend/src/types/configuration.ts
index 67e888c3e..fc3944d28 100644
--- a/web/frontend/src/types/configuration.ts
+++ b/web/frontend/src/types/configuration.ts
@@ -19,6 +19,16 @@ interface Hint {
   De: string;
 }
 
+// Choices
+interface Choice {
+  Choice: string;
+  URL: string;
+}
+interface ChoicesMap {
+  ChoicesMap: Map<string, string[]>;
+  URLs: string[];
+}
+
 interface SubjectElement {
   ID: ID;
   Type: string;
@@ -29,8 +39,8 @@ interface SubjectElement {
 interface RankQuestion extends SubjectElement {
   MaxN: number;
   MinN: number;
-  Choices: string[];
-  ChoicesMap: Map<string, string[]>;
+  Choices: Choice[];
+  ChoicesMap: ChoicesMap;
   Hint: Hint;
 }
 // Text describes a "text" question, which allows the user to enter free text.
@@ -39,8 +49,8 @@ interface TextQuestion extends SubjectElement {
   MinN: number;
   MaxLength: number;
   Regex: string;
-  Choices: string[];
-  ChoicesMap: Map<string, string[]>;
+  Choices: Choice[];
+  ChoicesMap: ChoicesMap;
   Hint: Hint;
 }
 
@@ -49,8 +59,8 @@ interface TextQuestion extends SubjectElement {
 interface SelectQuestion extends SubjectElement {
   MaxN: number;
   MinN: number;
-  Choices: string[];
-  ChoicesMap: Map<string, string[]>;
+  Choices: Choice[];
+  ChoicesMap: ChoicesMap;
   Hint: Hint;
 }
 
@@ -78,6 +88,8 @@ export type {
   ID,
   Title,
   Hint,
+  Choice,
+  ChoicesMap,
   TextQuestion,
   SelectQuestion,
   RankQuestion,
diff --git a/web/frontend/src/types/getObjectType.ts b/web/frontend/src/types/getObjectType.ts
index 82ef1b156..ba82902dc 100644
--- a/web/frontend/src/types/getObjectType.ts
+++ b/web/frontend/src/types/getObjectType.ts
@@ -40,7 +40,7 @@ const newRank = (): types.RankQuestion => {
     MaxN: 2,
     MinN: 2,
     Choices: [],
-    ChoicesMap: new Map(Object.entries(obj)),
+    ChoicesMap: { ChoicesMap: new Map(Object.entries(obj)), URLs: [''] },
     Type: RANK,
     Hint: {
       En: '',
@@ -61,7 +61,7 @@ const newSelect = (): types.SelectQuestion => {
     MaxN: 1,
     MinN: 1,
     Choices: [],
-    ChoicesMap: new Map(Object.entries(obj)),
+    ChoicesMap: { ChoicesMap: new Map(Object.entries(obj)), URLs: [''] },
     Type: SELECT,
     Hint: {
       En: '',
@@ -84,7 +84,7 @@ const newText = (): types.TextQuestion => {
     MaxLength: 50,
     Regex: '',
     Choices: [],
-    ChoicesMap: new Map(Object.entries(obj)),
+    ChoicesMap: { ChoicesMap: new Map(Object.entries(obj)), URLs: [''] },
     Type: TEXT,
     Hint: {
       En: '',
@@ -113,36 +113,39 @@ const answersFrom = (answers: types.Answers): types.Answers => {
   };
 };
 
-const choicesToChoicesMap = (choices: string[]): Map<string, string[]> => {
-  const choicesMap = new Map<string, string[]>();
+const choicesToChoicesMap = (choices: types.Choice[]): types.ChoicesMap => {
+  const choicesMap = { ChoicesMap: new Map<string, string[]>(), URLs: [] };
 
   // choices is of form `{"en": "choice1", "fr": "choix1"}`
   choices.forEach((choice) => {
-    const choiceObj = JSON.parse(choice) as { [key: string]: string };
+    const choiceObj = JSON.parse(choice.Choice) as { [key: string]: string };
     for (const [lang, c] of Object.entries(choiceObj)) {
-      if (!choicesMap.has(lang)) {
-        choicesMap.set(lang, [c]);
+      if (!choicesMap.ChoicesMap.has(lang)) {
+        choicesMap.ChoicesMap.set(lang, [c]);
       } else {
-        choicesMap.get(lang).push(c);
+        choicesMap.ChoicesMap.get(lang).push(c);
       }
     }
+    choicesMap.URLs.push(choice.URL);
   });
 
   return choicesMap;
 };
 
-const choicesMapToChoices = (ChoicesMap: Map<string, string[]>): string[] => {
-  let choices: string[] = [];
-  for (let i = 0; i < ChoicesMap.get('en').length; i++) {
+const choicesMapToChoices = (ChoicesMap: types.ChoicesMap): types.Choice[] => {
+  let choices: types.Choice[] = [];
+  for (let i = 0; i < ChoicesMap.ChoicesMap.get('en').length; i++) {
     const choiceMap = new Map<string, string>();
-    for (let key of ChoicesMap.keys()) {
-      if (ChoicesMap.get(key)[i] === '') {
+    for (let key of ChoicesMap.ChoicesMap.keys()) {
+      if (ChoicesMap.ChoicesMap.get(key)[i] === '') {
         continue;
       }
-      choiceMap.set(key, ChoicesMap.get(key)[i]);
+      choiceMap.set(key, ChoicesMap.ChoicesMap.get(key)[i]);
     }
-    const s = JSON.stringify(Object.fromEntries(choiceMap));
-    choices.push(s);
+    choices.push({
+      Choice: JSON.stringify(Object.fromEntries(choiceMap)),
+      URL: ChoicesMap.URLs[i],
+    });
   }
   return choices;
 };
diff --git a/web/frontend/tests/json/evoting/forms/canceled.json b/web/frontend/tests/json/evoting/forms/canceled.json
index 7c65a04c6..fbd7b5f89 100644
--- a/web/frontend/tests/json/evoting/forms/canceled.json
+++ b/web/frontend/tests/json/evoting/forms/canceled.json
@@ -29,9 +29,18 @@
             "MaxN": 2,
             "MinN": 1,
             "Choices": [
-              "{\"en\":\"Red\",\"fr\":\"Rouge\",\"de\":\"Rot\"}",
-              "{\"en\":\"Green\",\"fr\":\"Vert\",\"de\":\"Grün\"}",
-              "{\"en\":\"Blue\",\"fr\":\"Bleu\",\"de\":\"Blau\"}"
+              {
+                "Choice": "{\"en\":\"Red\",\"fr\":\"Rouge\",\"de\":\"Rot\"}",
+                "URL": "http://red.example.com"
+              },
+              {
+                "Choice": "{\"en\":\"Green\",\"fr\":\"Vert\",\"de\":\"Grün\"}",
+                "URL": ""
+              },
+              {
+                "Choice": "{\"en\":\"Blue\",\"fr\":\"Bleu\",\"de\":\"Blau\"}",
+                "URL": "http://blue.example.com"
+              }
             ],
             "Hint": {
               "En": "",
@@ -65,10 +74,22 @@
             "MaxN": 3,
             "MinN": 1,
             "Choices": [
-              "{\"en\":\"Cyan\",\"fr\":\"Cyan\",\"de\":\"Cyan\"}",
-              "{\"en\":\"Magenta\",\"fr\":\"Magenta\",\"de\":\"Magenta\"}",
-              "{\"en\":\"Yellow\",\"fr\":\"Jaune\",\"de\":\"Gelb\"}",
-              "{\"en\":\"Key\",\"fr\":\"Noir\",\"de\":\"Schwarz\"}"
+              {
+                "Choice": "{\"en\":\"Cyan\",\"fr\":\"Cyan\",\"de\":\"Cyan\"}",
+                "URL": "http://cyan.example.com"
+              },
+              {
+                "Choice": "{\"en\":\"Magenta\",\"fr\":\"Magenta\",\"de\":\"Magenta\"}",
+                "URL": "http://magenta.example.com"
+              },
+              {
+                "Choice": "{\"en\":\"Yellow\",\"fr\":\"Jaune\",\"de\":\"Gelb\"}",
+                "URL": ""
+              },
+              {
+                "Choice": "{\"en\":\"Key\",\"fr\":\"Noir\",\"de\":\"Schwarz\"}",
+                "URL": ""
+              }
             ],
             "Hint": {
               "En": "",
diff --git a/web/frontend/tests/json/evoting/forms/closed.json b/web/frontend/tests/json/evoting/forms/closed.json
index 7c65a04c6..fbd7b5f89 100644
--- a/web/frontend/tests/json/evoting/forms/closed.json
+++ b/web/frontend/tests/json/evoting/forms/closed.json
@@ -29,9 +29,18 @@
             "MaxN": 2,
             "MinN": 1,
             "Choices": [
-              "{\"en\":\"Red\",\"fr\":\"Rouge\",\"de\":\"Rot\"}",
-              "{\"en\":\"Green\",\"fr\":\"Vert\",\"de\":\"Grün\"}",
-              "{\"en\":\"Blue\",\"fr\":\"Bleu\",\"de\":\"Blau\"}"
+              {
+                "Choice": "{\"en\":\"Red\",\"fr\":\"Rouge\",\"de\":\"Rot\"}",
+                "URL": "http://red.example.com"
+              },
+              {
+                "Choice": "{\"en\":\"Green\",\"fr\":\"Vert\",\"de\":\"Grün\"}",
+                "URL": ""
+              },
+              {
+                "Choice": "{\"en\":\"Blue\",\"fr\":\"Bleu\",\"de\":\"Blau\"}",
+                "URL": "http://blue.example.com"
+              }
             ],
             "Hint": {
               "En": "",
@@ -65,10 +74,22 @@
             "MaxN": 3,
             "MinN": 1,
             "Choices": [
-              "{\"en\":\"Cyan\",\"fr\":\"Cyan\",\"de\":\"Cyan\"}",
-              "{\"en\":\"Magenta\",\"fr\":\"Magenta\",\"de\":\"Magenta\"}",
-              "{\"en\":\"Yellow\",\"fr\":\"Jaune\",\"de\":\"Gelb\"}",
-              "{\"en\":\"Key\",\"fr\":\"Noir\",\"de\":\"Schwarz\"}"
+              {
+                "Choice": "{\"en\":\"Cyan\",\"fr\":\"Cyan\",\"de\":\"Cyan\"}",
+                "URL": "http://cyan.example.com"
+              },
+              {
+                "Choice": "{\"en\":\"Magenta\",\"fr\":\"Magenta\",\"de\":\"Magenta\"}",
+                "URL": "http://magenta.example.com"
+              },
+              {
+                "Choice": "{\"en\":\"Yellow\",\"fr\":\"Jaune\",\"de\":\"Gelb\"}",
+                "URL": ""
+              },
+              {
+                "Choice": "{\"en\":\"Key\",\"fr\":\"Noir\",\"de\":\"Schwarz\"}",
+                "URL": ""
+              }
             ],
             "Hint": {
               "En": "",
diff --git a/web/frontend/tests/json/evoting/forms/combined.json b/web/frontend/tests/json/evoting/forms/combined.json
index d3edf82b1..fd418159d 100644
--- a/web/frontend/tests/json/evoting/forms/combined.json
+++ b/web/frontend/tests/json/evoting/forms/combined.json
@@ -29,9 +29,18 @@
             "MaxN": 2,
             "MinN": 1,
             "Choices": [
-              "{\"en\":\"Red\",\"fr\":\"Rouge\",\"de\":\"Rot\"}",
-              "{\"en\":\"Green\",\"fr\":\"Vert\",\"de\":\"Grün\"}",
-              "{\"en\":\"Blue\",\"fr\":\"Bleu\",\"de\":\"Blau\"}"
+              {
+                "Choice": "{\"en\":\"Red\",\"fr\":\"Rouge\",\"de\":\"Rot\"}",
+                "URL": "http://red.example.com"
+              },
+              {
+                "Choice": "{\"en\":\"Green\",\"fr\":\"Vert\",\"de\":\"Grün\"}",
+                "URL": ""
+              },
+              {
+                "Choice": "{\"en\":\"Blue\",\"fr\":\"Bleu\",\"de\":\"Blau\"}",
+                "URL": "http://blue.example.com"
+              }
             ],
             "Hint": {
               "En": "",
@@ -65,10 +74,22 @@
             "MaxN": 3,
             "MinN": 1,
             "Choices": [
-              "{\"en\":\"Cyan\",\"fr\":\"Cyan\",\"de\":\"Cyan\"}",
-              "{\"en\":\"Magenta\",\"fr\":\"Magenta\",\"de\":\"Magenta\"}",
-              "{\"en\":\"Yellow\",\"fr\":\"Jaune\",\"de\":\"Gelb\"}",
-              "{\"en\":\"Key\",\"fr\":\"Noir\",\"de\":\"Schwarz\"}"
+              {
+                "Choice": "{\"en\":\"Cyan\",\"fr\":\"Cyan\",\"de\":\"Cyan\"}",
+                "URL": "http://cyan.example.com"
+              },
+              {
+                "Choice": "{\"en\":\"Magenta\",\"fr\":\"Magenta\",\"de\":\"Magenta\"}",
+                "URL": "http://magenta.example.com"
+              },
+              {
+                "Choice": "{\"en\":\"Yellow\",\"fr\":\"Jaune\",\"de\":\"Gelb\"}",
+                "URL": ""
+              },
+              {
+                "Choice": "{\"en\":\"Key\",\"fr\":\"Noir\",\"de\":\"Schwarz\"}",
+                "URL": ""
+              }
             ],
             "Hint": {
               "En": "",
diff --git a/web/frontend/tests/json/evoting/forms/created.json b/web/frontend/tests/json/evoting/forms/created.json
index 36c765007..0cc4803eb 100644
--- a/web/frontend/tests/json/evoting/forms/created.json
+++ b/web/frontend/tests/json/evoting/forms/created.json
@@ -29,9 +29,18 @@
             "MaxN": 2,
             "MinN": 1,
             "Choices": [
-              "{\"en\":\"Red\",\"fr\":\"Rouge\",\"de\":\"Rot\"}",
-              "{\"en\":\"Green\",\"fr\":\"Vert\",\"de\":\"Grün\"}",
-              "{\"en\":\"Blue\",\"fr\":\"Bleu\",\"de\":\"Blau\"}"
+              {
+                "Choice": "{\"en\":\"Red\",\"fr\":\"Rouge\",\"de\":\"Rot\"}",
+                "URL": "http://red.example.com"
+              },
+              {
+                "Choice": "{\"en\":\"Green\",\"fr\":\"Vert\",\"de\":\"Grün\"}",
+                "URL": ""
+              },
+              {
+                "Choice": "{\"en\":\"Blue\",\"fr\":\"Bleu\",\"de\":\"Blau\"}",
+                "URL": "http://blue.example.com"
+              }
             ],
             "Hint": {
               "En": "",
@@ -65,10 +74,22 @@
             "MaxN": 3,
             "MinN": 1,
             "Choices": [
-              "{\"en\":\"Cyan\",\"fr\":\"Cyan\",\"de\":\"Cyan\"}",
-              "{\"en\":\"Magenta\",\"fr\":\"Magenta\",\"de\":\"Magenta\"}",
-              "{\"en\":\"Yellow\",\"fr\":\"Jaune\",\"de\":\"Gelb\"}",
-              "{\"en\":\"Key\",\"fr\":\"Noir\",\"de\":\"Schwarz\"}"
+              {
+                "Choice": "{\"en\":\"Cyan\",\"fr\":\"Cyan\",\"de\":\"Cyan\"}",
+                "URL": "http://cyan.example.com"
+              },
+              {
+                "Choice": "{\"en\":\"Magenta\",\"fr\":\"Magenta\",\"de\":\"Magenta\"}",
+                "URL": "http://magenta.example.com"
+              },
+              {
+                "Choice": "{\"en\":\"Yellow\",\"fr\":\"Jaune\",\"de\":\"Gelb\"}",
+                "URL": ""
+              },
+              {
+                "Choice": "{\"en\":\"Key\",\"fr\":\"Noir\",\"de\":\"Schwarz\"}",
+                "URL": ""
+              }
             ],
             "Hint": {
               "En": "",
@@ -95,4 +116,3 @@
   "BallotSize": 48,
   "Voters": []
 }
-
diff --git a/web/frontend/tests/json/evoting/forms/decrypted.json b/web/frontend/tests/json/evoting/forms/decrypted.json
index f38b100c4..2a0764847 100644
--- a/web/frontend/tests/json/evoting/forms/decrypted.json
+++ b/web/frontend/tests/json/evoting/forms/decrypted.json
@@ -29,9 +29,18 @@
             "MaxN": 2,
             "MinN": 1,
             "Choices": [
-              "{\"en\":\"Red\",\"fr\":\"Rouge\",\"de\":\"Rot\"}",
-              "{\"en\":\"Green\",\"fr\":\"Vert\",\"de\":\"Grün\"}",
-              "{\"en\":\"Blue\",\"fr\":\"Bleu\",\"de\":\"Blau\"}"
+              {
+                "Choice": "{\"en\":\"Red\",\"fr\":\"Rouge\",\"de\":\"Rot\"}",
+                "URL": "http://red.example.com"
+              },
+              {
+                "Choice": "{\"en\":\"Green\",\"fr\":\"Vert\",\"de\":\"Grün\"}",
+                "URL": ""
+              },
+              {
+                "Choice": "{\"en\":\"Blue\",\"fr\":\"Bleu\",\"de\":\"Blau\"}",
+                "URL": "http://blue.example.com"
+              }
             ],
             "Hint": {
               "En": "",
@@ -65,10 +74,22 @@
             "MaxN": 3,
             "MinN": 1,
             "Choices": [
-              "{\"en\":\"Cyan\",\"fr\":\"Cyan\",\"de\":\"Cyan\"}",
-              "{\"en\":\"Magenta\",\"fr\":\"Magenta\",\"de\":\"Magenta\"}",
-              "{\"en\":\"Yellow\",\"fr\":\"Jaune\",\"de\":\"Gelb\"}",
-              "{\"en\":\"Key\",\"fr\":\"Noir\",\"de\":\"Schwarz\"}"
+              {
+                "Choice": "{\"en\":\"Cyan\",\"fr\":\"Cyan\",\"de\":\"Cyan\"}",
+                "URL": "http://cyan.example.com"
+              },
+              {
+                "Choice": "{\"en\":\"Magenta\",\"fr\":\"Magenta\",\"de\":\"Magenta\"}",
+                "URL": "http://magenta.example.com"
+              },
+              {
+                "Choice": "{\"en\":\"Yellow\",\"fr\":\"Jaune\",\"de\":\"Gelb\"}",
+                "URL": ""
+              },
+              {
+                "Choice": "{\"en\":\"Key\",\"fr\":\"Noir\",\"de\":\"Schwarz\"}",
+                "URL": ""
+              }
             ],
             "Hint": {
               "En": "",
diff --git a/web/frontend/tests/json/evoting/forms/open.json b/web/frontend/tests/json/evoting/forms/open.json
index b1caae8be..c89aee0cb 100644
--- a/web/frontend/tests/json/evoting/forms/open.json
+++ b/web/frontend/tests/json/evoting/forms/open.json
@@ -29,9 +29,18 @@
             "MaxN": 2,
             "MinN": 1,
             "Choices": [
-              "{\"en\":\"Red\",\"fr\":\"Rouge\",\"de\":\"Rot\"}",
-              "{\"en\":\"Green\",\"fr\":\"Vert\",\"de\":\"Grün\"}",
-              "{\"en\":\"Blue\",\"fr\":\"Bleu\",\"de\":\"Blau\"}"
+              {
+                "Choice": "{\"en\":\"Red\",\"fr\":\"Rouge\",\"de\":\"Rot\"}",
+                "URL": "http://red.example.com"
+              },
+              {
+                "Choice": "{\"en\":\"Green\",\"fr\":\"Vert\",\"de\":\"Grün\"}",
+                "URL": ""
+              },
+              {
+                "Choice": "{\"en\":\"Blue\",\"fr\":\"Bleu\",\"de\":\"Blau\"}",
+                "URL": "http://blue.example.com"
+              }
             ],
             "Hint": {
               "En": "",
@@ -65,10 +74,22 @@
             "MaxN": 3,
             "MinN": 1,
             "Choices": [
-              "{\"en\":\"Cyan\",\"fr\":\"Cyan\",\"de\":\"Cyan\"}",
-              "{\"en\":\"Magenta\",\"fr\":\"Magenta\",\"de\":\"Magenta\"}",
-              "{\"en\":\"Yellow\",\"fr\":\"Jaune\",\"de\":\"Gelb\"}",
-              "{\"en\":\"Key\",\"fr\":\"Noir\",\"de\":\"Schwarz\"}"
+              {
+                "Choice": "{\"en\":\"Cyan\",\"fr\":\"Cyan\",\"de\":\"Cyan\"}",
+                "URL": "http://cyan.example.com"
+              },
+              {
+                "Choice": "{\"en\":\"Magenta\",\"fr\":\"Magenta\",\"de\":\"Magenta\"}",
+                "URL": "http://magenta.example.com"
+              },
+              {
+                "Choice": "{\"en\":\"Yellow\",\"fr\":\"Jaune\",\"de\":\"Gelb\"}",
+                "URL": ""
+              },
+              {
+                "Choice": "{\"en\":\"Key\",\"fr\":\"Noir\",\"de\":\"Schwarz\"}",
+                "URL": ""
+              }
             ],
             "Hint": {
               "En": "",
diff --git a/web/frontend/tests/json/evoting/forms/shuffled.json b/web/frontend/tests/json/evoting/forms/shuffled.json
index 695d4db36..e9e36ac3e 100644
--- a/web/frontend/tests/json/evoting/forms/shuffled.json
+++ b/web/frontend/tests/json/evoting/forms/shuffled.json
@@ -29,9 +29,18 @@
             "MaxN": 2,
             "MinN": 1,
             "Choices": [
-              "{\"en\":\"Red\",\"fr\":\"Rouge\",\"de\":\"Rot\"}",
-              "{\"en\":\"Green\",\"fr\":\"Vert\",\"de\":\"Grün\"}",
-              "{\"en\":\"Blue\",\"fr\":\"Bleu\",\"de\":\"Blau\"}"
+              {
+                "Choice": "{\"en\":\"Red\",\"fr\":\"Rouge\",\"de\":\"Rot\"}",
+                "URL": "http://red.example.com"
+              },
+              {
+                "Choice": "{\"en\":\"Green\",\"fr\":\"Vert\",\"de\":\"Grün\"}",
+                "URL": ""
+              },
+              {
+                "Choice": "{\"en\":\"Blue\",\"fr\":\"Bleu\",\"de\":\"Blau\"}",
+                "URL": "http://blue.example.com"
+              }
             ],
             "Hint": {
               "En": "",
@@ -65,10 +74,22 @@
             "MaxN": 3,
             "MinN": 1,
             "Choices": [
-              "{\"en\":\"Cyan\",\"fr\":\"Cyan\",\"de\":\"Cyan\"}",
-              "{\"en\":\"Magenta\",\"fr\":\"Magenta\",\"de\":\"Magenta\"}",
-              "{\"en\":\"Yellow\",\"fr\":\"Jaune\",\"de\":\"Gelb\"}",
-              "{\"en\":\"Key\",\"fr\":\"Noir\",\"de\":\"Schwarz\"}"
+              {
+                "Choice": "{\"en\":\"Cyan\",\"fr\":\"Cyan\",\"de\":\"Cyan\"}",
+                "URL": "http://cyan.example.com"
+              },
+              {
+                "Choice": "{\"en\":\"Magenta\",\"fr\":\"Magenta\",\"de\":\"Magenta\"}",
+                "URL": "http://magenta.example.com"
+              },
+              {
+                "Choice": "{\"en\":\"Yellow\",\"fr\":\"Jaune\",\"de\":\"Gelb\"}",
+                "URL": ""
+              },
+              {
+                "Choice": "{\"en\":\"Key\",\"fr\":\"Noir\",\"de\":\"Schwarz\"}",
+                "URL": ""
+              }
             ],
             "Hint": {
               "En": "",

From 898069604fe4fae31b2e5fd6526bedfef98b27de Mon Sep 17 00:00:00 2001
From: Carine Dengler <git@carine-dengler.de>
Date: Fri, 1 Mar 2024 10:28:08 +0100
Subject: [PATCH 3/5] fix: fix internalisation problems w/ text results

---
 .../src/pages/ballot/components/Text.tsx         | 16 ++++------------
 .../src/pages/form/components/TextResult.tsx     |  9 ++++++---
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/web/frontend/src/pages/ballot/components/Text.tsx b/web/frontend/src/pages/ballot/components/Text.tsx
index f8a9635e0..b76b472f6 100644
--- a/web/frontend/src/pages/ballot/components/Text.tsx
+++ b/web/frontend/src/pages/ballot/components/Text.tsx
@@ -117,23 +117,15 @@ const Text: FC<TextProps> = ({ text, answers, setAnswers, language }) => {
         </div>
       </div>
       <div className="pt-1">{requirementsDisplay()}</div>
-      {language === 'en' && text.ChoicesMap.ChoicesMap.has('en') && (
+      {text.ChoicesMap.ChoicesMap.has(language) ? (
         <div className="sm:pl-8 mt-2 pl-6">
-          {text.ChoicesMap.ChoicesMap.get('en').map((choice, index) =>
-            choiceDisplay(choice, text.ChoicesMap.URLs[index], index)
-          )}
-        </div>
-      )}
-      {language === 'fr' && text.ChoicesMap.ChoicesMap.has('fr') && (
-        <div className="sm:pl-8 mt-2 pl-6">
-          {text.ChoicesMap.ChoicesMap.get('fr').map((choice, index) =>
+          {text.ChoicesMap.ChoicesMap.get(language).map((choice, index) =>
             choiceDisplay(choice, text.ChoicesMap.URLs[index], index)
           )}
         </div>
-      )}
-      {language === 'de' && text.ChoicesMap.ChoicesMap.has('de') && (
+      ) : (
         <div className="sm:pl-8 mt-2 pl-6">
-          {text.ChoicesMap.ChoicesMap.get('de').map((choice, index) =>
+          {text.ChoicesMap.ChoicesMap.get('en').map((choice, index) =>
             choiceDisplay(choice, text.ChoicesMap.URLs[index], index)
           )}
         </div>
diff --git a/web/frontend/src/pages/form/components/TextResult.tsx b/web/frontend/src/pages/form/components/TextResult.tsx
index 0c7900031..f002fd5c7 100644
--- a/web/frontend/src/pages/form/components/TextResult.tsx
+++ b/web/frontend/src/pages/form/components/TextResult.tsx
@@ -46,9 +46,12 @@ export const IndividualTextResult: FC<IndividualTextResultProps> = ({ text, text
           <React.Fragment key={`txt_${index}`}>
             <div className="flex flex-row px-2 sm:px-4 break-words max-w-xs w-max">
               <div className="mr-2 font-bold">
-                {i18n.language === 'en' && text.ChoicesMap.ChoicesMap.get('en')[index]}
-                {i18n.language === 'fr' && text.ChoicesMap.ChoicesMap.get('fr')[index]}
-                {i18n.language === 'de' && text.ChoicesMap.ChoicesMap.get('de')[index]}:
+                {
+                  (text.ChoicesMap.ChoicesMap.has(i18n.language)
+                    ? text.ChoicesMap.ChoicesMap.get(i18n.language)
+                    : text.ChoicesMap.ChoicesMap.get('en'))[index]
+                }
+                :
               </div>
               <div>{result}</div>
             </div>

From 56676a3efe6e1ad9929ad929bb86e3a1a638efd9 Mon Sep 17 00:00:00 2001
From: Carine Dengler <git@carine-dengler.de>
Date: Fri, 1 Mar 2024 10:56:09 +0100
Subject: [PATCH 4/5] refactor: refactor choice display

---
 .../src/pages/form/components/RankResult.tsx  | 18 +++------------
 .../pages/form/components/SelectResult.tsx    | 22 +++----------------
 .../src/pages/form/components/TextResult.tsx  | 11 ++--------
 .../pages/form/components/utils/display.tsx   | 17 ++++++++++++++
 4 files changed, 25 insertions(+), 43 deletions(-)
 create mode 100644 web/frontend/src/pages/form/components/utils/display.tsx

diff --git a/web/frontend/src/pages/form/components/RankResult.tsx b/web/frontend/src/pages/form/components/RankResult.tsx
index ef8d56466..5327994f3 100644
--- a/web/frontend/src/pages/form/components/RankResult.tsx
+++ b/web/frontend/src/pages/form/components/RankResult.tsx
@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import { RankQuestion } from 'types/configuration';
 import { ProgressBar } from './ProgressBar';
 import { countRankResult } from './utils/countResult';
-import { default as i18n } from 'i18next';
+import { prettifyChoice } from './utils/display';
 
 type RankResultProps = {
   rank: RankQuestion;
@@ -20,12 +20,7 @@ const RankResult: FC<RankResultProps> = ({ rank, rankResult }) => {
       return (
         <React.Fragment key={index}>
           <div className="px-2 sm:px-4 break-words max-w-xs w-max">
-            <span>
-              {i18n.language === 'en' && rank.ChoicesMap.ChoicesMap.get('en')[index]}
-              {i18n.language === 'fr' && rank.ChoicesMap.ChoicesMap.get('fr')[index]}
-              {i18n.language === 'de' && rank.ChoicesMap.ChoicesMap.get('de')[index]}
-            </span>
-            :
+            <span>{prettifyChoice(rank.ChoicesMap, index)}</span>:
           </div>
           <ProgressBar isBest={isBest}>{percent}</ProgressBar>
         </React.Fragment>
@@ -48,14 +43,7 @@ export const IndividualRankResult: FC<RankResultProps> = ({ rank, rankResult })
           <React.Fragment key={`rank_${index}`}>
             <div className="flex flex-row px-2 sm:px-4 break-words max-w-xs w-max">
               <div className="mr-2 font-bold">{index + 1}:</div>
-              <div>
-                {i18n.language === 'en' &&
-                  rank.ChoicesMap.ChoicesMap.get('en')[rankResult[0].indexOf(index)]}
-                {i18n.language === 'fr' &&
-                  rank.ChoicesMap.ChoicesMap.get('fr')[rankResult[0].indexOf(index)]}
-                {i18n.language === 'de' &&
-                  rank.ChoicesMap.ChoicesMap.get('de')[rankResult[0].indexOf(index)]}
-              </div>
+              <div>{prettifyChoice(rank.ChoicesMap, rankResult[0].indexOf(index))}</div>
             </div>
           </React.Fragment>
         );
diff --git a/web/frontend/src/pages/form/components/SelectResult.tsx b/web/frontend/src/pages/form/components/SelectResult.tsx
index bf86f6322..6957aaff4 100644
--- a/web/frontend/src/pages/form/components/SelectResult.tsx
+++ b/web/frontend/src/pages/form/components/SelectResult.tsx
@@ -2,29 +2,13 @@ import React, { FC } from 'react';
 import { SelectQuestion } from 'types/configuration';
 import { SelectProgressBar } from './ProgressBar';
 import { countSelectResult } from './utils/countResult';
-import { default as i18n } from 'i18next';
+import { prettifyChoice } from './utils/display';
 
 type SelectResultProps = {
   select: SelectQuestion;
   selectResult: number[][];
 };
 
-const prettifyChoice = (select, index) => {
-  const choice = (
-    select.ChoicesMap.ChoicesMap.has(i18n.language)
-      ? select.ChoicesMap.ChoicesMap.get(i18n.language)
-      : select.ChoicesMap.ChoicesMap.get('en')
-  )[index];
-  const url = select.ChoicesMap.URLs[index];
-  return url ? (
-    <a href={url} style={{ color: 'blue', textDecoration: 'underline' }}>
-      {choice}
-    </a>
-  ) : (
-    choice
-  );
-};
-
 // Display the results of a select question.
 const SelectResult: FC<SelectResultProps> = ({ select, selectResult }) => {
   const sortedResults = countSelectResult(selectResult)
@@ -40,7 +24,7 @@ const SelectResult: FC<SelectResultProps> = ({ select, selectResult }) => {
       return (
         <React.Fragment key={index}>
           <div className="px-2 sm:px-4 break-words max-w-xs w-max">
-            <span>{prettifyChoice(select, origIndex)}</span>:
+            <span>{prettifyChoice(select.ChoicesMap, origIndex)}</span>:
           </div>
           <SelectProgressBar
             percent={percent}
@@ -74,7 +58,7 @@ export const IndividualSelectResult: FC<SelectResultProps> = ({ select, selectRe
           <React.Fragment key={`select_${index}`}>
             <div className="flex flex-row px-2 sm:px-4 break-words max-w-xs w-max">
               <div className="h-4 w-4 mr-2 accent-indigo-500 ">{displayChoices(result, index)}</div>
-              <div>{prettifyChoice(select, index)}</div>
+              <div>{prettifyChoice(select.ChoicesMap, index)}</div>
             </div>
           </React.Fragment>
         );
diff --git a/web/frontend/src/pages/form/components/TextResult.tsx b/web/frontend/src/pages/form/components/TextResult.tsx
index f002fd5c7..121f50e9a 100644
--- a/web/frontend/src/pages/form/components/TextResult.tsx
+++ b/web/frontend/src/pages/form/components/TextResult.tsx
@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import { TextQuestion } from 'types/configuration';
 import { ProgressBar } from './ProgressBar';
 import { countTextResult } from './utils/countResult';
-import { default as i18n } from 'i18next';
+import { prettifyChoice } from './utils/display';
 
 type TextResultProps = {
   textResult: string[][];
@@ -45,14 +45,7 @@ export const IndividualTextResult: FC<IndividualTextResultProps> = ({ text, text
         return (
           <React.Fragment key={`txt_${index}`}>
             <div className="flex flex-row px-2 sm:px-4 break-words max-w-xs w-max">
-              <div className="mr-2 font-bold">
-                {
-                  (text.ChoicesMap.ChoicesMap.has(i18n.language)
-                    ? text.ChoicesMap.ChoicesMap.get(i18n.language)
-                    : text.ChoicesMap.ChoicesMap.get('en'))[index]
-                }
-                :
-              </div>
+              <div className="mr-2 font-bold">{prettifyChoice(text.ChoicesMap, index)}:</div>
               <div>{result}</div>
             </div>
           </React.Fragment>
diff --git a/web/frontend/src/pages/form/components/utils/display.tsx b/web/frontend/src/pages/form/components/utils/display.tsx
new file mode 100644
index 000000000..b84a6c3c5
--- /dev/null
+++ b/web/frontend/src/pages/form/components/utils/display.tsx
@@ -0,0 +1,17 @@
+import { default as i18n } from 'i18next';
+
+export const prettifyChoice = (choicesMap, index) => {
+  const choice = (
+    choicesMap.ChoicesMap.has(i18n.language)
+      ? choicesMap.ChoicesMap.get(i18n.language)
+      : choicesMap.ChoicesMap.get('en')
+  )[index];
+  const url = choicesMap.URLs[index];
+  return url ? (
+    <a href={url} style={{ color: 'blue', textDecoration: 'underline' }}>
+      {choice}
+    </a>
+  ) : (
+    choice
+  );
+};

From 26e0700acdd1a71a446f50f4e8230219bb47ea76 Mon Sep 17 00:00:00 2001
From: Carine Dengler <git@carine-dengler.de>
Date: Fri, 1 Mar 2024 11:07:04 +0100
Subject: [PATCH 5/5] style: ran prettier

---
 web/frontend/src/schema/form_conf.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/frontend/src/schema/form_conf.json b/web/frontend/src/schema/form_conf.json
index 4b4d0a832..3d1a2b8de 100644
--- a/web/frontend/src/schema/form_conf.json
+++ b/web/frontend/src/schema/form_conf.json
@@ -53,8 +53,8 @@
                   "items": {
                     "type": "object",
                     "properties": {
-                       "Choice": { "type": "string" },
-                       "URL": { "type": "string" }
+                      "Choice": { "type": "string" },
+                      "URL": { "type": "string" }
                     }
                   }
                 },
@@ -92,8 +92,8 @@
                   "items": {
                     "type": "object",
                     "properties": {
-                       "Choice": { "type": "string" },
-                       "URL": { "type": "string" }
+                      "Choice": { "type": "string" },
+                      "URL": { "type": "string" }
                     }
                   }
                 },
@@ -133,8 +133,8 @@
                   "items": {
                     "type": "object",
                     "properties": {
-                       "Choice": { "type": "string" },
-                       "URL": { "type": "string" }
+                      "Choice": { "type": "string" },
+                      "URL": { "type": "string" }
                     }
                   }
                 },