diff --git a/code/matt_r/java/vueQuiz/images/Capture.PNG b/code/matt_r/java/vueQuiz/images/Capture.PNG new file mode 100644 index 00000000..4c4977d8 Binary files /dev/null and b/code/matt_r/java/vueQuiz/images/Capture.PNG differ diff --git a/code/matt_r/java/vueQuiz/index.html b/code/matt_r/java/vueQuiz/index.html new file mode 100644 index 00000000..4f3692e7 --- /dev/null +++ b/code/matt_r/java/vueQuiz/index.html @@ -0,0 +1,107 @@ + + + + + + + + + + + + + + + Matt's Quiz + + + +
+
+
+
+

Your current score is {{ currentScore }}/10

+
+
+
+ +
+

Quiz Catagories

+
+ +


+
+ +
+

Choose Difficulty

+
+ +

+ +
+
+ + + + +
+

{{ currentQuestion.question }}

+
+
+ + + + + +
+ +
+ + + + + + +
+ +
+

{{ incorrectAnswer }}

+
+

{{ correctAnswer }}

+
+ + + + + + +
+ + + + + + + + + \ No newline at end of file diff --git a/code/matt_r/java/vueQuiz/script.js b/code/matt_r/java/vueQuiz/script.js new file mode 100644 index 00000000..408e8ae7 --- /dev/null +++ b/code/matt_r/java/vueQuiz/script.js @@ -0,0 +1,132 @@ + + +const app = Vue.createApp({ + data(){ + return{ + message: 'Hello World', + questionArray: [], + questionArrayIndex : 0, + currentQuestion: {}, + allQuestions: [], + answerResults: [], + + currentScore: 0, + + correctAnswer: '', + incorrectAnswer: '', + + catagory: '', + + userAmount: 10, + userType: 'multiple', + userDifficulty: 'easy', + userCategory: 9, + + inGame: false, + + } + + }, + methods:{ + getNewQuestion(){ + // this.hideContent() + axios({ + method: 'get', + url: `https://opentdb.com/api.php`, + params: { + amount: this.userAmount, + type: this.userType, + difficulty: this.userDifficulty, + category: this.userCategory, + + } + }).then((response)=> { + this.questionArray = response.data.results + + this.checkAnswers() + + // console.log(this.currentQuestion.incorrect_answers[0]) + // this.revealContent() + this.inGame = true + }) + }, + + checkAnswers(index){ + // console.log(this.allQuestions[index]) + if (this.allQuestions[index] === this.currentQuestion.correct_answer && this.allQuestions[index] !== undefined){ + console.log(this.allQuestions[index]) + this.correctAnswer = 'correct' + this.currentScore++ + } + else{ + + this.correctAnswer = this.currentQuestion.correct_answer + this.incorrectAnswer = this.allQuestions[index] + // console.log('INCORRECT') + // this.answerResult.push('incorrect') + } + this.setAnswers() + }, + + setAnswers(){ + if (this.questionArrayIndex === 10){ + + this.currentScore = 0 + this.getNewQuestion() + this.questionArrayIndex = 0 + this.incorrectAnswer = '' + this.correctAnswer = '' + // console.log('test is it working') + } + else{ + + this.currentQuestion = this.questionArray[this.questionArrayIndex] + + this.allQuestions = [] + + this.allQuestions.push(this.currentQuestion.correct_answer) + this.allQuestions.push(this.currentQuestion.incorrect_answers[0]) + this.allQuestions.push(this.currentQuestion.incorrect_answers[1]) + this.allQuestions.push(this.currentQuestion.incorrect_answers[2]) + + // this.shuffleAnswers() + this.allQuestions.sort(() => Math.random() -0.5) + this.questionArrayIndex++ + console.log(this.currentQuestion.correct_answer) + + // console.log(this.currentQuestion.correct_answer) + } + + }, + getMoreQuestions(){ + if (this.questionArrayIndex === 9){ + this.getNewQuestion() + this.questionArrayIndex = 0 + // console.log('test is it working') + } + + }, + decode(str) { + let txt = document.createElement("textarea"); + txt.innerHTML = str; + return txt.value; + }, + + + // revealContent(){ + // let buttondiv = document.querySelector('#choices') + // buttondiv.style.display='block' + // }, + // hideContent(){ + // let buttondiv = document.querySelector('#choices') + // buttondiv.style.display='none' + // }, + + + + + }, + setup(){ + + } +}) diff --git a/code/matt_r/java/vueQuiz/styles.css b/code/matt_r/java/vueQuiz/styles.css new file mode 100644 index 00000000..34074197 --- /dev/null +++ b/code/matt_r/java/vueQuiz/styles.css @@ -0,0 +1,114 @@ + + +*{ + padding: 0; + margin: 0; + box-sizing: border-box; + background-color: black; + color: white; + +} + +#header{ + display: flex; + align-items: center; + justify-content: space-between; + background-color: darkgrey; + height: 4rem; +} + +#logo{ + height: 4rem; + width: auto; +} + +#title{ + background-color: darkgrey; + padding-right: 3rem; +} + +#app{ + display: flex; + flex-direction: column; + /* justify-content: center; */ + align-items: center; + + +} + +#score{ + display: flex; + justify-content: right; + text-align: right; + color: blue; + +} + +#difficulty{ + display: flex; + flex-direction: column; + align-items: center; + /* border: 2px solid red; */ +} + +.select{ + background-color: transparent; + padding: .5rem 1rem .5rem 1rem; + border: 1px solid white; +} + +.options{ + background-color: transparent; + /* padding: .5rem 1rem .5rem 1rem; */ +} + +#question-container{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 30rem; + border: 3px solid white; + border-radius: 1.5rem; + + padding: 1rem 2rem 1rem 2rem; +} + +#questionsDisplay{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.button{ + padding: .5rem 1rem .5rem 1rem; + background-color: transparent; + border-color: red +} + +#choices{ + display: flex; + flex-direction: column; + gap: 1rem; + +} + + +#results{ + display: flex; + flex-direction: column; + padding-top: 1rem; + +} + +#incorrect{ + color: red; + +} + +#correct{ + color: green; + +} +