From ea2719e5d61fcb454e47377042e34f623f8749df Mon Sep 17 00:00:00 2001
From: bewe <93899302+bernarduswillson@users.noreply.github.com>
Date: Fri, 10 Nov 2023 21:26:21 +0700
Subject: [PATCH] feat: can do exercise and get score
---
app/controllers/Exercise.php | 29 +++++++
app/views/exercise/index.php | 5 +-
app/views/question/index.php | 23 ++++++
public/js/exercise.js | 79 +++++++++++--------
public/js/question.js | 142 +++++++++++++++++++++++++++++++++++
5 files changed, 245 insertions(+), 33 deletions(-)
create mode 100644 app/views/question/index.php
create mode 100644 public/js/question.js
diff --git a/app/controllers/Exercise.php b/app/controllers/Exercise.php
index cfa5b25..b958022 100644
--- a/app/controllers/Exercise.php
+++ b/app/controllers/Exercise.php
@@ -12,4 +12,33 @@ class Exercise extends Controller {
$this->view('exercise/index', $data);
$this->view('footer/index');
}
+
+ public function question($exerciseId = null) {
+ $this->validateSession();
+
+ // $this->validateParamQuestion($questionId);
+
+ // Question
+ if (isset($exerciseId) && !empty($exerciseId)) {
+ $data["pageTitle"] = "Test your knowledge!";
+ $data["user_id"] = $_SESSION['user_id'];
+ $data["exercise_id"] = $exerciseId;
+ // $data["video"] = $this->model("VideoModel")->getVideoById($videoId);
+
+ $this->view('header/index', $data);
+ $this->view('navbar/index');
+ $this->view('question/index', $data);
+ $this->view('footer/index');
+ }
+ }
+
+ public function validateParamQuestion($questionId) {
+ if (isset($questionId) && !empty($questionId)) {
+ // if ($this->model("VideoModel")->validateById($moduleId, $videoId)) {
+ // return;
+ // }
+ $this->show404();
+ exit();
+ }
+ }
}
\ No newline at end of file
diff --git a/app/views/exercise/index.php b/app/views/exercise/index.php
index 03ab6eb..e8ebb97 100644
--- a/app/views/exercise/index.php
+++ b/app/views/exercise/index.php
@@ -11,7 +11,7 @@
<div class="input-container">
<div class="filter-sort">
<select name="language" id="language-input" class="text-sm font-reg text-black">
- <option value="" <?php echo empty($data["languages"]) ? "selected" : ""; ?>>All languages</option>
+ <option value="-1" <?php echo empty($data["languages"]) ? "selected" : ""; ?>>All languages</option>
<?php foreach ($data["languages"] as $language): ?>
<option value="<?= $language["language_id"] ?>">
<?= $language["language_name"] ?>
@@ -20,7 +20,7 @@
</select>
</div>
</div>
-
+
<div class="card-container" id="exercise-container">
</div>
</form>
@@ -29,5 +29,4 @@
<script>
const languages = <?= json_encode($data["languages"]) ?>;
</script>
-<!-- <script src="/public/js/search-filter-sort.js"></script> -->
<script src="/public/js/exercise.js"></script>
\ No newline at end of file
diff --git a/app/views/question/index.php b/app/views/question/index.php
new file mode 100644
index 0000000..a138859
--- /dev/null
+++ b/app/views/question/index.php
@@ -0,0 +1,23 @@
+<?php
+?>
+
+<div class="question">
+ <div class="container question-container">
+ <h1 class="font-bold text-xl text-blue-purple-gradient" id="question-header">
+ </h1>
+ <div class="" id="question-container">
+ </div>
+ <div class="" id="exercise-pagination">
+ </div>
+ <button id="submitBtn" onclick="submitQuiz()">Submit</button>
+ Score
+ <div id="exercise-score">
+ </div>
+ </div>
+
+
+</div>
+<script>
+ const exercise = <?= json_encode($data["exercise_id"]) ?>;
+</script>
+<script src="/public/js/question.js"></script>
\ No newline at end of file
diff --git a/public/js/exercise.js b/public/js/exercise.js
index 94c2274..dfc5cb9 100644
--- a/public/js/exercise.js
+++ b/public/js/exercise.js
@@ -1,32 +1,51 @@
-fetch('http://localhost:5000/exercise')
- .then(response => response.json())
- .then(data => {
- const exerciseContainer = document.getElementById('exercise-container');
-
- // Process the data and update the HTML content
- data.result.forEach(exercise => {
- const exerciseCard = document.createElement('div');
- exerciseCard.classList.add('exercise-card');
-
- for (let i = 0; i < languages.length; i++) {
- if (languages[i].language_id === exercise.language_id) {
- language = languages[i].language_name;
- break;
+const exerciseContainer = document.getElementById('exercise-container');
+const languageSelect = document.getElementById('language-input');
+languageSelect.addEventListener('change', fetchExercises);
+
+fetchExercises();
+
+function fetchExercises() {
+ const selectedLanguageId = parseInt(languageSelect.value, 10);
+
+ if (selectedLanguageId === -1) {
+ link = "http://localhost:5000/exercise"
+ } else {
+ link = `http://localhost:5000/exercise/${selectedLanguageId}`
+ }
+
+ fetch(link)
+ .then(response => response.json())
+ .then(data => {
+ const exerciseContainer = document.getElementById('exercise-container');
+
+ exerciseContainer.innerHTML = '';
+
+ data.result.forEach(exercise => {
+ const exerciseCard = document.createElement('div');
+ exerciseCard.classList.add('exercise-card');
+
+ for (let i = 0; i < languages.length; i++) {
+ if (languages[i].language_id === exercise.language_id) {
+ language = languages[i].language_name;
+ break;
+ }
}
- }
-
- exerciseCard.innerHTML = `
- <div class="exercise-head">
- <div class="content">
- <h2 class="font-bold text-md">${exercise.exe_name}</h2>
- <span class="font-reg text-xs">${language} ● ${exercise.difficulty} ● ${exercise.category}</span>
- </div>
- </div>
- `;
-
- exerciseContainer.appendChild(exerciseCard);
+
+ exerciseCard.innerHTML = `
+ <a href="/exercise/question/${exercise.exercise_id}">
+ <div class="exercise-head">
+ <div class="content">
+ <h2 class="font-bold text-md">${exercise.exe_name}</h2>
+ <span class="font-reg text-xs">${language} ● ${exercise.difficulty} ● ${exercise.category}</span>
+ </div>
+ </div>
+ </a>
+ `;
+
+ exerciseContainer.appendChild(exerciseCard);
+ });
+ })
+ .catch(error => {
+ console.error('Error:', error);
});
- })
- .catch(error => {
- console.error('Error:', error);
- });
+}
diff --git a/public/js/question.js b/public/js/question.js
new file mode 100644
index 0000000..47708d0
--- /dev/null
+++ b/public/js/question.js
@@ -0,0 +1,142 @@
+fetchQuestions(0);
+
+let selectedOption = {};
+
+function fetchQuestions(page) {
+ fetch(`http://localhost:5000/exercise/${exercise}`)
+ .then(response => response.json())
+ .then(exercise => {
+ const questionHeader = document.getElementById('question-header');
+
+ questionHeader.innerHTML = '';
+
+ questionHeader.innerHTML = `
+ ${exercise.result[0].exe_name}
+ `;
+ });
+
+ fetch(`http://localhost:5000/question/${exercise}`)
+ .then(response => response.json())
+ .then(question => {
+ const questionContainer = document.getElementById('question-container');
+
+ questionContainer.innerHTML = '';
+
+ const questionList = document.createElement('div');
+ questionList.classList.add('question-list');
+
+ questionList.innerHTML = `
+ <div class="question-head">
+ <div class="content" id="content">
+ <h2>${question.result[page].question}</h2>
+ </div>
+ </div>
+ `;
+
+ questionContainer.appendChild(questionList);
+
+ fetch(`http://localhost:5000/option/${question.result[page].question_id}`)
+ .then(response => response.json())
+ .then(options => {
+ const content = document.getElementById('content');
+ const optionList = document.createElement('div');
+ optionList.classList.add('option-list');
+
+ options.result.forEach(option => {
+ const optionItem = document.createElement('div');
+ optionItem.innerHTML = `
+ <label>
+ <input
+ type="radio"
+ name="options"
+ value="${option.option_id}"
+ ${selectedOption[question.result[page].question_id.toString()] === option.option_id ? 'checked' : ''}
+ onclick="saveSelectedOption(${question.result[page].question_id}, ${option.option_id})"
+ >
+ ${option.option}
+ </label>
+ `;
+ // console.log(option.option_id)
+
+ optionList.appendChild(optionItem);
+ });
+
+ content.appendChild(optionList);
+ });
+ })
+ .catch(error => {
+ console.error('Error:', error);
+ });
+}
+
+const exercisePagination = document.getElementById('exercise-pagination');
+fetch(`http://localhost:5000/question/count/${exercise}`)
+ .then(response => response.json())
+ .then(countData => {
+ const totalQuestions = countData.result;
+ const totalPages = totalQuestions;
+
+ console.log('Total Questions:', totalQuestions);
+
+ for (let page = 1; page <= totalPages; page++) {
+ const paginationCard = document.createElement('div');
+ paginationCard.classList.add('pagination-card');
+
+ paginationCard.innerHTML = `
+ <button class="pagination-button" onclick="fetchQuestions(${page - 1})">
+ ${page}
+ </button>
+ `;
+
+ exercisePagination.appendChild(paginationCard);
+ }
+ })
+ .catch(error => {
+ console.error('Error:', error);
+ });
+
+function saveSelectedOption(questionId, optionId) {
+ const questionKey = questionId.toString();
+ selectedOption[questionKey] = optionId;
+}
+
+function submitQuiz() {
+ const exerciseId = exercise;
+
+ const submitData = {};
+
+ for (const questionId in selectedOption) {
+ if (selectedOption.hasOwnProperty(questionId)) {
+ const optionId = selectedOption[questionId];
+ submitData[`question_${questionId}`] = optionId;
+ }
+ }
+
+ fetch(`http://localhost:5000/exercise/result/${exerciseId}`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(submitData),
+ })
+ .then(response => response.json())
+ .then(data => {
+ console.log('Quiz submitted successfully:', data);
+ const exerciseScore = document.getElementById('exercise-score');
+
+ const correct = Object.keys(data.correctResults);
+ const wrong = Object.keys(data.wrongResults);
+ const correctLength = correct.length;
+ const wrongLength = wrong.length;
+ const score = correctLength / (correctLength + wrongLength) * 100
+
+ exerciseScore.innerHTML = '';
+
+ exerciseScore.innerHTML = `
+ ${score}
+ `;
+ })
+ .catch(error => {
+ console.error('Error submitting quiz:', error);
+ });
+}
--
GitLab