You are going to create a tool that we often use in our surveys; we call it a Card Rating.

You will have 8 hours to complete the challenge. It is likely that you will not finish everything, that's ok, just do as much as you can.

• You will work in a Vue.js project in combination with SCSS. No additional libraries are allowed.

• Show us that you can work with single file components.

• You can use the Vuex store, this is already included in the basic setup you can find below.

• Make sure to think about responsiveness. You will only receive a desktop design, it is up to you how the mobile design should look :)

• You can use one browser of your choice to create this for. Don't forget to tell us which one you picked.

• Write sufficient code comments.

• Download and install a basic vue setup from here: vue-challenge.zip

• Inspect the design files to see what you need to create.

• Add the attached images to the project.

• You will use a GitHub repository to save and share your code, so commit properly :)

Note: You don't need to stick to the order below, feel free to choose what you would like to do first.

• Step 1

  • Recreate the design in ./readme/design_1.mov.

  • You can pick your own background, question and text colors to use in all steps.

• Step 2

  • Recreate the design in ./readme/design_2.mov.

  • We use font-awesome for the stars, but feel free to make your own decisions here.

• Step 3

  • Make another Card Rating, this time you should be able to select multiple buttons per card (so per quote) in stead of being able to select only a single option like in Step 1 or Step 2.

  • You can use the buttons from step 1 or think of your own.

    You can find provided assets in ./src/assets/.

  • Again, use your own creativity on how to style this.

Other

• Be able to drag and drop the cards in the right answer.
• Write a test.
• Add animations.
• ...surprise us!

Have fun and good luck! :)

npm install

npm run serve

npm run build

npm run test

npm run lint

npm run test:unit

See Configuration Reference.