+
+ You haven't created any quizzes yet :(
+ +
+
+
+ All quizzes
+diff --git a/README.md b/README.md new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html new file mode 100644 index 0000000..74d9967 --- /dev/null +++ b/index.html @@ -0,0 +1,58 @@ + + +
+ + + + + + + + + + +GlobalQuiz
+You haven't created any quizzes yet :(
+ +All quizzes
+Create your questions
+Now, decide the levels!
+Back to home
+ `; +} + +const accessQuiz = async (id) => { + try { + showLoading(); + const finalScreen = document.querySelector(".final-screen"); + finalScreen.classList.add("hidden"); + + const response = await axios.get(`${BASE_URL}/quizzes/${id}`); + displayQuizScreen(response.data); + } catch (error) { + window.location.reload(); + throw error; + } +}; + +document.addEventListener("DOMContentLoaded", function () { + const createQuizzButton = document.querySelector('.button-creation'); + if (createQuizzButton) { + createQuizzButton.addEventListener("click", showCreationScreen); + } +}); \ No newline at end of file diff --git a/src/scripts/main.js b/src/scripts/main.js new file mode 100644 index 0000000..b17682d --- /dev/null +++ b/src/scripts/main.js @@ -0,0 +1,357 @@ +import { returnHome } from "./modules/main/events.js"; +import { Loading } from './components/Loading.js'; + +window.Loading = Loading; + +let accuracyPercentage = 0; +let totalAnswers = 0; +let countOfCorrectAnswers = 0; +let levels = []; + +window.BASE_URL = "https://mock-api.driven.com.br/api/v4/buzzquizz"; + +window.showLoading = () => { + const loadingScreen = document.querySelector(".loading-screen"); + loadingScreen.innerHTML = Loading(); +} + +window.removeLoading = () => { + const loadingScreen = document.querySelector(".loading-screen"); + loadingScreen.innerHTML = ""; +} + +const isValidURL = (url) => { + const urlRegex = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/; + return urlRegex.test(url); +} + +const shuffleAnswers = (array) => { + for (let i = array.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [array[i], array[j]] = [array[j], array[i]]; + } + return array; +}; + +const restartQuiz = (currentQuiz) => { + const restartPage = document.querySelector(".quiz-page"); + accuracyPercentage = 0; + totalAnswers = 0; + countOfCorrectAnswers = 0; + restartPage.remove(); + goToQuizScreen(currentQuiz); +} + +const backToHome = () => { + document.location.reload(true); +} + +const getUserQuizzes = async () => { + const createFirstQuizzContainer = document.querySelector(".create-quiz"); + const containerYourQuizzes = document.querySelector(".container-your-quizzes"); + const yourQuizzes = document.querySelector(".your-quizzes"); + let quizzesUsuario = ""; + + if (localStorage.getItem("id")) { + createFirstQuizzContainer.classList.add("hidden"); + containerYourQuizzes.classList.remove("hidden"); + const id = JSON.parse(localStorage.getItem("id")); + + for (const quizId of id) { + try { + const response = await axios.get(`${BASE_URL}/quizzes/${quizId.toString()}`); + const userQuiz = response.data; + + const quizElement = document.createElement("div"); + + quizElement.classList.add("other-quizzes"); + quizElement.setAttribute("data-identifier", "quiz-card"); + quizElement.setAttribute("data-quiz-id", userQuiz.id) + + const imgElement = document.createElement("img"); + imgElement.src = userQuiz.image; + + const shadowElement = document.createElement("div"); + shadowElement.classList.add("image-shadow"); + + const spanElement = document.createElement("span"); + spanElement.textContent = userQuiz.title; + + quizElement.appendChild(imgElement); + quizElement.appendChild(shadowElement); + quizElement.appendChild(spanElement); + + quizzesUsuario += quizElement.outerHTML; + } catch (error) { + throw error; + } + } + + yourQuizzes.innerHTML = quizzesUsuario; + + yourQuizzes.addEventListener("click", (event) => { + if (event.target.classList.contains("image-shadow")) { + const quizElement = event.target.closest(".other-quizzes"); + + if (quizElement) { + const quizId = quizElement.getAttribute("data-quiz-id"); + goToQuizScreen(quizId); + } + } + }); + + } +} + +const goToQuizScreen = async (id) => { + try { + showLoading(); + const mainScreen = document.querySelector(".main-page-body"); + const quiz = await axios.get(`${BASE_URL}/quizzes/${id}`); + mainScreen.classList.add("hidden"); + displayQuizScreen(quiz.data); + window.scrollTo(0, 0); + } catch (error) { + throw error; + } +} + +window.displayQuizScreen = (quizData) => { + removeLoading(); + levels = quizData.levels; + + const body = document.querySelector("body"); + + const quizPage = document.createElement("div"); + quizPage.classList.add("quiz-page"); + quizPage.innerHTML = ` +${levels[0].text}
+