diff --git a/examples/questionnaire/Example.vue b/examples/questionnaire/Example.vue index df61eec7..9b6fcff0 100644 --- a/examples/questionnaire/Example.vue +++ b/examples/questionnaire/Example.vue @@ -46,12 +46,13 @@ v-on:click.prevent="onSendData()" aria-label="Press to submit" > - {{ language.submitText }} + {{ language.submitText }} - {{ language.pressEnter }} + v-on:click.prevent="onSendData()" + v-html="language.formatString(language.pressEnter)"> +

Submitted succesfully.

@@ -290,7 +291,7 @@ return data } - } + }, } diff --git a/examples/quiz/Example.vue b/examples/quiz/Example.vue index af33fda4..e5102666 100644 --- a/examples/quiz/Example.vue +++ b/examples/quiz/Example.vue @@ -48,8 +48,9 @@ - {{ language.pressEnter }} + v-on:click.prevent="onQuizSubmit()" + v-html="language.formatString(language.pressEnter)"> +

"You scored {{ score }} out of {{ total }}. There's a lot of room for improvement."

"You scored {{ score }} out of {{ total }}. Not bad at all!"

@@ -331,7 +332,7 @@ this.submitted = true this.calculateScore() } - } + }, } diff --git a/src/assets/css/common.css b/src/assets/css/common.css index d57f5bd3..683fc0f8 100644 --- a/src/assets/css/common.css +++ b/src/assets/css/common.css @@ -176,6 +176,10 @@ svg.logo { margin-bottom: 20px; } +.f-uppercase { + text-transform: uppercase; +} + /*v-form*/ .v-form { margin-top: 26vh; @@ -398,7 +402,7 @@ span.f-sub { margin-top: 6px; } -span.f-sub span{ +span.f-sub span:not(.f-uppercase) { margin-right: .4rem; } diff --git a/src/components/FlowForm.vue b/src/components/FlowForm.vue index 9e4e8212..715868f3 100644 --- a/src/components/FlowForm.vue +++ b/src/components/FlowForm.vue @@ -43,8 +43,9 @@ class="f-enter-desc" href="#" v-on:click.prevent="submit()" - v-if="!submitted"> - {{ language.pressEnter }} + v-if="!submitted" + v-html="language.formatString(language.pressEnter)"> + @@ -466,7 +467,7 @@ */ blurFocus() { document.activeElement && document.activeElement.blur && document.activeElement.blur() - } + }, } } diff --git a/src/components/Question.vue b/src/components/Question.vue index f0909246..85897ae5 100644 --- a/src/components/Question.vue +++ b/src/components/Question.vue @@ -31,7 +31,7 @@ {{ question.subtitle }} - {{ question.helpText || language.longTextHelpText }} + {{ question.helpText || language.multipleChoiceHelpText }} @@ -66,8 +66,9 @@ class="f-enter-desc" href="#" v-if="question.type !== QuestionType.LongText || !isMobile" - v-on:click.prevent="onEnter"> - {{ language.pressEnter }} + v-on:click.prevent="onEnter" + v-html="language.formatString(language.pressEnter)"> + @@ -95,6 +96,7 @@ import FlowFormTextType from './QuestionTypes/TextType.vue' import FlowFormUrlType from './QuestionTypes/UrlType.vue' import { IsMobile } from '../mixins/IsMobile' + export default { name: 'FlowFormQuestion', diff --git a/src/components/QuestionTypes/BaseType.vue b/src/components/QuestionTypes/BaseType.vue index 0dbae79c..2b345574 100644 --- a/src/components/QuestionTypes/BaseType.vue +++ b/src/components/QuestionTypes/BaseType.vue @@ -20,7 +20,7 @@ value: [String, Array] }, mixins: [ - IsMobile + IsMobile, ], data() { return { diff --git a/src/models/LanguageModel.js b/src/models/LanguageModel.js index b4218be5..3fcd071f 100644 --- a/src/models/LanguageModel.js +++ b/src/models/LanguageModel.js @@ -8,14 +8,16 @@ export default class LanguageModel { constructor(options) { + this.enterKey = 'Enter' + this.shiftKey = 'Shift' this.ok = 'OK' this.continue = 'Continue' - this.pressEnter = 'Press ENTER' + this.pressEnter = 'Press :enterKey' this.multipleChoiceHelpText = 'Choose as many as you like' this.otherPrompt = 'Other' this.placeholder = 'Type your answer here...' this.submitText = 'Submit' - this.longTextHelpText = 'SHIFT + ENTER to make a line break.' + this.longTextHelpText = ':shiftKey + :enterKey to make a line break.' this.prev = 'Prev' this.next = 'Next' this.percentCompleted = ':percent% completed' @@ -31,4 +33,20 @@ export default class LanguageModel { Object.assign(this, options || {}) } -} \ No newline at end of file + + /** + * Inserts a new CSS class into the language model string to format the :string + * Use it in a component's v-html directive: v-html="language.formatString(language.languageString)" + */ + formatString(string) { + return string.replace(/:(\w+)/g, (match, word) => { + if (this[word]) { + return '' + this[word] + '' + } + + return match + }) + } +} + +