1.0.0 • Public • Published

    🧮 Score Calculator

    Want to know a score, get it here.

    See a version of this component in use with the SwissPrEPared HIV risk calculator.

    👩‍💻 Usage

    Install the calculator from NPM.

    npm install @ovl/score-calculator

    Next, import it in the component where you want to use it:

    import ScoreCalculator from '@ovl/score-calculator'



    These questions must be objects which have a unique ID, a title, and an array of answers. Let’s take this question as an example:

      id: 123456789,
      title: 'How many nights do you sleep in a normal week?',
      answers: [
        { text: '≥10', score: 7 },
        { text: '6–9', score: 4 },
        { text: '0–5', score: 0 }

    As you can see, all answers have a score property. That’s rather important, as the diligent score calculation robot making this component work needs scores to compute. As it’s diligent but not sophisticated, the scores need to be given to them.

    In it’s former life it has been employed as the calculating soul of an abacus. Unfortunartely, abaci went out of fashion and our score calculating robot became a bit bored. Luckily we found them before something bad happened and they now works happily inside the score calculator.

    Got a bit carried away there. Back to the component.

    More formally:

    An answer is an object of text and score.

    answer: Object {
      text: String,
      score: Number

    A question has a mandatory, unique ID and a title as well as an array of answers which need to implement the answer interface.

    question: Object {
      id: String | Number,
      title: String,
      answers: Array [answer]

    Finally, questions are an array of question types:

    questions: Array[question]


    To change the text content of the button, use the buttonText prop:

    buttonText: {
      type: String,
      default: 'Show results'


    By default all questions are required before a score is calculated. If some questions are optional, you can change this behaviour through the questionsOptional prop.

    questionsOptional: {
      type: Boolean,
      default: false


    Once a user clicks on the button there two possibilities.

    If all questions have been answered – or questionsOptional is set to true – the component emits scoreResult with the accumulated score as its payload.

    If not all questions have been answered and questionsOptional is set to false the emitted event is missingQuestions without the missing questions as its payload.

    🥼 Development setup

    You’ll need to install the project’s dependencies first:

    npm install

    Compiles and hot-reloads for development

    npm run serve

    Compiles and minifies for production

    npm run build

    Run your unit tests

    npm run test:unit

    Lints and fixes files

    npm run lint

    Customize configuration

    See Configuration Reference.




    npm i @ovl/score-calculator

    DownloadsWeekly Downloads






    Unpacked Size

    29.9 kB

    Total Files


    Last publish


    • ovl