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 - 1" v-bind:class="getDotClass(n)"></div>
        </div>
        <Question
                v-bind:type="$store.state.questions[$store.state.currentQuestion].type"
                v-bind:question="$store.state.questions[$store.state.currentQuestion].question"
                v-bind:answers="$store.state.questions[$store.state.currentQuestion].answers"></Question>
    </div>
</template>

<script>
    import Question from "@/components/Question";
    export default {
        name: "Questionnaire",
        components: {Question},
        mounted() {
            this.$store.commit("init")
        },
        methods: {
            getDotClass(n) {
                if (n < this.$store.state.currentQuestion) {
                    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 {
        font-family: sans-serif;
        padding: 0.1em 0 0 0;
        margin: 0.2em;
        width: 0.5em;
        height: 0.5em;
        border-radius: 50%;
        font-size: 0.9em;
        color: #000000;
        text-align: center;
        background: transparent;
        border: 2px solid #23286b;
        user-select: none;
        cursor: pointer;
    }
    .point.answered {
        background-color: #23286b;
    }

</style>