Student Side

This page discusses the main features of the project's student end.

• Survey Page
• Review Survey Page
• Locked Survey Page

Survey Page

The survey page shows one question at a time. We do this by using an index, iterating through the array of survey questions to display one each time. Each time the index changes, the currentQuestion variable changes, effectively changing the question displayed.

Changing between the questions:

const previousQuestion = () => {
  currentIndex.value--;
  currentQuestion = surveyStore.currentSurvey.question[currentIndex.value];

  max.value = false;
  if (currentIndex.value === 0) {
    min.value = true;
  }
};

const nextQuestion = () => {
  currentIndex.value++;
  currentQuestion = surveyStore.currentSurvey.question[currentIndex.value];

  min.value = false;
  if (currentIndex.value === surveyStore.currentSurvey.question.length - 1) {
    max.value = true;
  }
};

Review Survey Page

The review page displays all survey pages. This is the page where students submit their survey. Submitting the survey calls the survey store's checkAnswers function. This checks over if every question has been answered.

When a student has previously submitted the survey, they will be automatically be redirected to this page the next time they view the survey (with the use of navigation guards).

Locked Survey Page

This is what the student sees when the survey is no longer up for editing (such as when the guidance counselor finalizes their survey or when the due date is over). Note that this view uses different survey components for checkbox questions (uses closed ranking components).