PdxCodeGuild · fmouse01 · Nov 8, 2022 · Nov 8, 2022 · Nov 16, 2022
diff --git a/code/matt_r/java/vueQuiz/images/Capture.PNG b/code/matt_r/java/vueQuiz/images/Capture.PNG
diff --git a/code/matt_r/java/vueQuiz/index.html b/code/matt_r/java/vueQuiz/index.html
@@ -0,0 +1,107 @@
+
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="styles.css">
+
+    <!-- Import Vue.js -->
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <title>Matt's Quiz</title>
+</head>
+<body>
+    <nav>
+        <div id="header">
+            <img id="logo" src="./images/Capture.PNG">
+            <h1 id="title">Matt's Quiz</h1>
+        </div>
+    </nav>
+    <div id="app">
+            </br>
+            </br>
+        <div id="score">
+            <h3 >Your current score is {{ currentScore }}/10</h3>
+        </div>
+            </br>
+        <div id="question-container">
+
+            <div id="difficulty" v-if="inGame === false">
+                    <h2>Quiz Catagories</h2>
+                </br>
+                    <select class="select" v-model="userCategory">
+                        <option class="options" value="">--Choose an option--</option>
+                        <option class="options" value="9">General Knowledge</option>
+                        <option class="options" value="20">Mythology</option>
+                        <option class="options" value="21">Sports</option>
+                        <option class="options" value="23">History</option>
+                        <option class="options" value="26">Celebrities</option>
+                        <option class="options" value="24">Politics</option>
+                        <option class="options" value="27">Animals</option>
+                    </select>  
+                </br></br></br>
+                </div>
+
+                <div id="difficulty" v-if="inGame === false">
+                    <h2>Choose Difficulty</h2>
+                    </br>
+                    <select class="select" v-model="userDifficulty">
+                        <option class="options" value="easy">Easy</option>
+                        <option class="options" value="medium">Medium</option>
+                        <option class="options" value="hard">Hard</option>
+                    </select>
+                    </br></br>
+
+                </div>
+                </br>
+
+                <button class="button" @click="getNewQuestion()" v-if="inGame === false">Start</button>
+
+
+                <div id="questionsDisplay" v-if="inGame"> 
+                    <h1>{{ currentQuestion.question }}</h1>
+                    </br>
+                    <div id="choices">
+                        <button class="button" @click="checkAnswers(0)">{{ allQuestions[0] }}</button> 
+                        <button class="button" @click="checkAnswers(1)">{{ allQuestions[1] }}</button>
+                        <button class="button" @click="checkAnswers(2)">{{ allQuestions[2] }}</button>
+                        <button class="button" @click="checkAnswers(3)">{{ allQuestions[3] }}</button>
+
+                    </div>
+
+                </div>
+
+
+
+
+
+
+            </div>
+
+            <div id="results">
+            <p id="incorrect">{{ incorrectAnswer }}</p> 
+            </br>
+                <p id="correct">{{ correctAnswer }}</p>
+            </div>
+
+
+
+
+
+
+    </div>
+
+    <!-- Import App -->
+    <script src="./script.js"></script>
+
+    <!-- Mount App -->
+    <script>
+        const mountApp = app.mount('#app')
+    </script>
+
+</body>
+</html>
diff --git a/code/matt_r/java/vueQuiz/script.js 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
@@ -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;
+
+}
+