Skip to content

Commit

Permalink
adding disclaimer for community categorie
Browse files Browse the repository at this point in the history
  • Loading branch information
Strogator committed Apr 19, 2024
1 parent 693838d commit 3ee990d
Showing 1 changed file with 59 additions and 43 deletions.
102 changes: 59 additions & 43 deletions frontend/src/views/QuizView.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script setup>
import { useRoute } from 'vue-router';
import { onMounted, ref } from 'vue';
import {useRoute} from 'vue-router';
import {onMounted, ref} from 'vue';
import AnswerForm from '@/components/AnswerForm.vue';
import LeaderBoard from '@/components/LeaderBoard.vue';
import CategorieBanner from '@/components/CategorieBanner.vue';
Expand All @@ -14,72 +14,88 @@ const id_category = route.params.id_category;
// variables specific to this component
const question = ref(null);
const hasAskedOptions = ref(false);
const disclaimer = ref(false);
const fetchNewQuestion = async () => {
question.value = await APIClient.getNewQuestion(id_category)
question.value = await APIClient.getNewQuestion(id_category);
// wait for the question before checking if the user has asked for options
hasAskedOptions.value = await APIClient.getIfOptionsAsked();
};
// wait for the question before checking if the user has asked for options
hasAskedOptions.value = await APIClient.getIfOptionsAsked();
}
// Fetch user IQ and add it to the graph
const graphComponent = ref(null);
const fetchUserIQ = async () => {
const userIq = await APIClient.getUserIQ(id_category);
graphComponent.value.addData(userIq);
}
const userIq = await APIClient.getUserIQ(id_category);
graphComponent.value.addData(userIq);
};
onMounted(() => {
fetchNewQuestion();
fetchUserIQ();
});
fetchNewQuestion();
fetchUserIQ();
// Check if URL is matching to community category
if (route.params.id_category === '23') {
disclaimer.value = true;
}
});
</script>

<template>
<section class="container">
<p class="info">Answer correctly to the question and earn as many IQs as possible!</p>
</section>
<section class="quiz container col-wrapper">
<div>
<h1 class="title">Question</h1>
<p class="question box">{{ question }}</p>
<AnswerForm @new-question="fetchNewQuestion" @update-user-iq="fetchUserIQ"
:hasAskedOptions="hasAskedOptions" />
</div>
<div>
<CategorieBanner class="category-banner" :id_category="Number(id_category)" />
<GraphSection ref="graphComponent" />
<LeaderBoard :id_category="Number(id_category)" />
</div>
</section>
<section class="container">
<p v-if="disclaimer" class="disclaimer">Please be aware that this category is not moderated.
Answers to questions provided here may be inaccurate or misleading !</p>
<p class="info">Answer correctly to the question and earn as many IQs as possible!</p>
</section>
<section class="quiz container col-wrapper">
<div>
<h1 class="title">Question</h1>
<p class="question box">{{ question }}</p>
<AnswerForm @new-question="fetchNewQuestion" @update-user-iq="fetchUserIQ"
:hasAskedOptions="hasAskedOptions"/>
</div>
<div>
<CategorieBanner class="category-banner" :id_category="Number(id_category)"/>
<GraphSection ref="graphComponent"/>
<LeaderBoard :id_category="Number(id_category)"/>
</div>
</section>
</template>

<style scoped>
.container{
.container {
max-width: 1200px;
}
.title {
text-align: center;
.info {
text-align: center;
}
.question {
text-align: center;
margin-bottom: 1.3rem;
text-align: center;
margin-bottom: 1.3rem;
}
.category-banner {
display: none;
display: none;
}
.disclaimer {
text-align: center;
font-weight: bold;
color: red;
margin-top: 1rem;
}
@media (min-width: 1024px) {
.col-wrapper {
display: grid;
grid-template-columns: 5fr 1fr;
column-gap: 3rem;
}
.col-wrapper {
display: grid;
grid-template-columns: 5fr 1fr;
column-gap: 3rem;
}
.category-banner {
display: block;
}
.category-banner {
display: block;
}
}
</style>
</style>

0 comments on commit 3ee990d

Please sign in to comment.