covidassist/src/views/Questionnaire.vue

<template>
    <div class="questionmaire">
        <div class="progress">
            <div v-bind:key="n" v-for="n in $store.state.questions.length" v-bind:class="getDotClass(n)"></div>
        </div>
        <Question
                v-bind:type="$store.state.questions[$route.params.id].type"
                v-bind:question="$store.state.questions[$route.params.id].question"
                v-bind:answers="$store.state.questions[$route.params.id].answers"></Question>
    </div>
</template>

<script>
    import Question from "@/components/Question";
    export default {
        name: "Questionnaire",
        components: {Question},
        methods: {
            getDotClass(n) {
                if (n <= this.$route.params.id) {
                    return "point answered"
                } else {
                    return "point"
                }
            }
        },
    }
</script>

<style scoped>
    .progress {
        margin-top: 1em;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
    }
    .point {
        margin: 0.2em;
        width: 0.5em;
        height: 0.5em;
        border-radius: 50%;
        background: transparent;
        border: 2px solid #23286b;
        user-select: none;
        cursor: pointer;
    }
    .point.answered {
        background-color: #23286b;
    }

</style>