Fix link option

Author: EkaterinaVu

examples/questionnaire/Example.vue

@@ -88,43 +88,23 @@
         questions: [
           new QuestionModel({
             id: 'first_name',
-            tagline: "Hi! Welcome to our demo survey 😊",
+            tagline: 'Hi! Welcome to our demo survey 😊',
             title: 'What is your first name?',
-            description: 'Some description',
-            link: [
-              new LinkOption({
-                url: "https://www.ditdot.hr/",
-                anchor: 'I am a DITDOT official page link', 
-              }), 
-              new LinkOption({
-                url: "https://github.com/ditdot-dev/vue-flow-form", 
-              })
-            ],
             type: QuestionType.Text,
             required: true,
             placeholder: 'Start typing here...'
           }),
           new QuestionModel({
             id: 'email',
             tagline: "Nice to meet you 👀, let's continue",
-            title: "Provide an example email.",
-             link: [
-              new LinkOption({
-                url: "https://www.ditdot.hr/",
-                anchor: 'I am a DITDOT official page link', 
-              }), 
-              new LinkOption({
-                url: "https://github.com/ditdot-dev/vue-flow-form", 
-              })
-            ],
+            title: 'Provide an example email.',
             type: QuestionType.Email,
             required: true,
             placeholder: 'Start typing here...'
           }),
           new QuestionModel({
             id: 'phone',
             title: 'Doing great! 👍 Go ahead and try with a phone number.',
-            description: 'Some description',
             type: QuestionType.Phone,
             required: true,
             mask: '(###) ###-####'
@@ -138,7 +118,7 @@
           }),
           new QuestionModel({
             id: 'multiple_choice',
-            tagline: "FYI, You can always go back 👈, use the up arrow on the bottom.",
+            tagline: 'FYI, You can always go back 👈, use the up arrow on the bottom.',
             title: 'Multiple choice question:',
             type: QuestionType.MultipleChoice,
             multiple: false,
@@ -188,7 +168,7 @@
           }),
           new QuestionModel({
             id: 'choose_path',
-            tagline: "Where would you like to go? 🤔",
+            tagline: 'Where would you like to go? 🤔',
             title: 'Choose your path:',
             type: QuestionType.Dropdown,
             multiple: false,
@@ -219,7 +199,7 @@
           }),
           new QuestionModel({
             id: 'path_b',
-            tagline: "Path B",
+            tagline: 'Path B',
             title: 'Hmm, are you sure?',
             helpText: 'Path A sounds like a winner! 😉',
             type: QuestionType.MultipleChoice,

examples/quiz/Example.vue

@@ -107,7 +107,7 @@
           }),
           new QuestionModel({
             id: 'html_1',
-            title: "Which of the following are valid input field types? ",
+            title: 'Which of the following are valid input field types?',
             helpText: 'Choose all answers that apply.',
             type: QuestionType.MultipleChoice,
             required: true,

src/assets/css/common.css

@@ -328,19 +328,21 @@ span.f-answered{
 
 /*links*/
 
-.link a {
-  display: inline-block;
-  height: 1.5rem;
+a.f-link {
   margin-right: 10px;
   color: inherit;
   border-bottom: 1px solid;
-  
 }
 
-.link a:hover {
- border-bottom: none;
+a.f-link:first-of-type {
+  margin-left: 7px;
 }
 
+a.f-link:hover, 
+a.f-link:active {
+ color: inherit; 
+ border-bottom: none;
+}
 
 /*typography*/
 li,

src/components/Question.vue

@@ -49,14 +49,17 @@
             />
           </div>
         </div>
-        <p v-if="question.description ||question.link" class="description">
+        <p v-if="question.description || question.descriptionLink" class="description">
           {{ question.description }}
-          <span v-if="question.link">
-            <span class="link"
-            v-for="(link, index) in question.link" 
-            v-bind:key="'m' + index" v-html="link.formatLink()">
-            </span>
-          </span>
+          <a
+            v-for="(link, index) in question.descriptionLink" 
+            class="f-link" 
+            v-bind:key="'m' + index"
+            v-bind:href="link.url"
+            v-bind:target="link.target"
+          >
+            {{ link.text || link.url }}
+          </a>
         </p>
 
       </div>

src/models/QuestionModel.js

@@ -50,14 +50,11 @@ export class ChoiceOption {
 export class LinkOption {
   constructor(options) {
     this.url = ''
-    this.anchor = 'Link'
+    this.text = ''
     this.target = '_blank'
 
     Object.assign(this, options)
   }
-  formatLink() {
-    return `<a href=${this.url} target=${this.target}>${this.anchor}</a>`
-  }
 }
 
 export default class QuestionModel {
@@ -85,7 +82,7 @@ export default class QuestionModel {
     this.content = null
     this.inline = false
     this.helpText = null
-    this.link = []
+    this.descriptionLink = []
 
     Object.assign(this, options)