msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity

adding a quiz app for more interactive quizzes

Browse Source
pull/132/head
Jen Looper 4 years ago
parent e673998d7e
commit 03355fabe2
19 changed files with 12427 additions and 0 deletions
Show Stats Download Patch File Download Diff File

1
.gitignore vendored
Unescape View File

@ -0,0 +1 @@
/.DS_Store

1
quiz-app/.gitignore vendored
Unescape View File

@ -0,0 +1 @@
node_modules

5
quiz-app/.vscode/settings.json vendored
Unescape View File

@ -0,0 +1,5 @@
{
"staticWebApps.appSubpath": "/",
"staticWebApps.apiSubpath": "api",
"staticWebApps.outputSubpath": "dist"
}

21
quiz-app/LICENSE
Unescape View File

@ -0,0 +1,21 @@
MIT License
Copyright (c) 2020 Arpan Adhikari
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

33
quiz-app/README.md
Unescape View File

@ -0,0 +1,33 @@
# Quizzes
These quizzes are the pre- and post-lecture quizzes for the web development for beginners curriculum at https://aka.ms/webdev-beginners
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
Credits: Thanks to the original version of this quiz app: https://github.com/arpan45/simple-quiz-vue

5
quiz-app/babel.config.js
Unescape View File

@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

11926
quiz-app/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

43
quiz-app/package.json
Unescape View File

@ -0,0 +1,43 @@
{
"name": "quizzes",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-router": "^3.4.9"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

1
quiz-app/public/favicon.ico
Unescape View File

@ -0,0 +1 @@
<EFBFBD><EFBFBD>i<EFBFBD><EFBFBD>ًk<1D>­<><C2AD>$r<>؟<EFBFBD>Z(<28>ي<EFBFBD><D98A>و<EFBFBD><D988>ى<EFBFBD><D989><EFBFBD>^<5E>F<EFBFBD>ُg<D98F>م<EFBFBD><D985><EFBFBD>}ُ­<D98F>Nzّ<7A>t<EFBFBD><74><EFBFBD><EFBFBD>^zك<7A><D983>k<EFBFBD>nnX<6E><58><EFBFBD><EFBFBD><EFBFBD>ت'<27>ت

17
quiz-app/public/index.html
Unescape View File

@ -0,0 +1,17 @@
<!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="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

83
quiz-app/src/App.vue
Unescape View File

@ -0,0 +1,83 @@
<template>
<div>
<nav>
<router-link class="navlink" to="/">Home</router-link>
</nav>
<div id="app">
<h1>Web Development for Beginners: Quizzes</h1>
<router-view>
<Quiz />
</router-view>
</div>
</div>
</template>
<script>
import Quiz from "@/components/Quiz.vue";
export default {
name: "App",
components: {
Quiz,
},
};
</script>
<style>
html {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #252d4a;
}
nav {
background-color: #252d4a;
padding: 1em;
margin-bottom: 20px;
}
nav a {
color: white;
text-align: right;
}
.link {
display: list-item;
}
h1,
h2,
h3,
.message {
text-align: center;
}
.card {
width: 40%;
border: #252d4a solid;
border-radius: 5px;
display: flex;
margin: auto;
padding: 1em;
}
.btn {
min-width: 50%;
font-size: 16px;
text-align: center;
cursor: pointer;
margin-bottom: 5px;
width: 50%;
font-size: 16px;
color: #ffffff;
background-color: #252d4a;
border-radius: 5px;
padding: 5px;
justify-content: flex-start;
align-items: center;
}
.ans-btn {
justify-content: center;
display: flex;
margin: 4px auto;
}
</style>

108
quiz-app/src/assets/data/en/quiz.json
Unescape View File

@ -0,0 +1,108 @@
[
{
"id": 1,
"title": "Lesson 1: Pre-Lecture Quiz",
"quiz": [
{
"questionText": "A program can be created without the creator writing any code",
"answerOptions": [
{
"answerText": "true",
"isCorrect": "true"
},
{
"answerText": "false",
"isCorrect": "false"
}
]
},
{
"questionText": "Low level languages are a popular choice for",
"answerOptions": [
{
"answerText": "Websites",
"isCorrect": "false"
},
{
"answerText": "Hardware",
"isCorrect": "true"
},
{
"answerText": "Video game software",
"isCorrect": "false"
}
]
},
{
"questionText": "Which one of these tools would most likely be in a web developer's environment?",
"answerOptions": [
{
"answerText": "Hardware, like a Raspberry Pi",
"isCorrect": "false"
},
{
"answerText": "Browser DevTools",
"isCorrect": "true"
},
{
"answerText": "Operating system documentation",
"isCorrect": "false"
}
]
}
]
},
{
"id": 2,
"title": "Lesson 1: Post-Lecture Quiz",
"quiz": [
{
"questionText": "What language would you most likely use to create a website?",
"answerOptions": [
{
"answerText": "Machine Code",
"isCorrect": "false"
},
{
"answerText": "JavaScript",
"isCorrect": "true"
},
{
"answerText": "Bash",
"isCorrect": "false"
}
]
},
{
"questionText": "Development environments are unique to each developer",
"answerOptions": [
{
"answerText": "true",
"isCorrect": "true"
},
{
"answerText": "false",
"isCorrect": "false"
}
]
},
{
"questionText": "What will a developer do to fix buggy code?",
"answerOptions": [
{
"answerText": "Syntax highlighting",
"isCorrect": "false"
},
{
"answerText": "Debugging",
"isCorrect": "true"
},
{
"answerText": "Code formatting",
"isCorrect": "false"
}
]
}
]
}
]

1
quiz-app/src/assets/logo.png
Unescape View File

@ -0,0 +1 @@
<EFBFBD><EFBFBD>i<EFBFBD><EFBFBD>ًk<1D>­<><C2AD>$r<>؟<EFBFBD>Z(<28>ي<EFBFBD><D98A>و<EFBFBD><D988>ى<EFBFBD><D989><EFBFBD>^<5E>F<EFBFBD>ُg<D98F>م<EFBFBD><D985><EFBFBD>}ُ­<D98F>Nzّ<7A>t<EFBFBD><74><EFBFBD><EFBFBD>^zك<7A><D983>k<EFBFBD>+s<>،<EFBFBD>ًl<D98B>Z <20><>ـ

1
quiz-app/src/assets/quiz.jpg
Unescape View File

@ -0,0 +1 @@
<EFBFBD><EFBFBD>i<EFBFBD><EFBFBD>ًk<1D>­<><C2AD>$r<>؟<EFBFBD>Z(<28>ي<EFBFBD><D98A>و<EFBFBD><D988>ى<EFBFBD><D989><EFBFBD>^<5E>F<EFBFBD>ُg<D98F>م<EFBFBD><D985><EFBFBD>}ُ­<D98F>Nzّ<7A>t<EFBFBD><74><EFBFBD><EFBFBD>^zك<7A><D983>k<EFBFBD>+s<>،<EFBFBD>ًl<D98B><6C><EFBFBD>خ:`

61
quiz-app/src/components/Quiz.vue
Unescape View File

@ -0,0 +1,61 @@
<template>
<div class="card">
<div v-for="q in questions" :key="q.id">
<div v-if="route == q.id">
<h2>
{{ q.quiz[currentQuestion].questionText }}
</h2>
<h3 class="message">{{ message }}</h3>
<div>
<button
:key="index"
v-for="(option, index) in q.quiz[currentQuestion].answerOptions"
@click="handleAnswerClick(option.isCorrect)"
class="btn ans-btn"
>
{{ option.answerText }}
</button>
</div>
</div>
</div>
</div>
</template>
<script>
import questions from "@/assets/data/en/quiz.json";
export default {
data() {
return {
currentQuestion: 0,
message: "",
startQuiz: false,
restart: false,
questions: questions,
route: "",
};
},
methods: {
handleAnswerClick(isCorrect) {
let nextQuestion = this.currentQuestion + 1;
console.log(nextQuestion);
if (isCorrect == "true") {
this.message = "";
//always 3 questions per quiz
if (nextQuestion < 3) {
this.currentQuestion = nextQuestion;
} else {
this.message = "Well done, you've completed the quiz";
}
} else {
this.message = "sorry, try again";
}
},
},
created() {
console.log(this.$route.params.id);
this.route = this.$route.params.id;
},
};
</script>

6
quiz-app/src/main.js
Unescape View File

@ -0,0 +1,6 @@
import Vue from 'vue';
import App from './App.vue';
Vue.config.productionTip = false;
import router from './router';
new Vue({ router, render: (h) => h(App) }).$mount('#app');

34
quiz-app/src/router/index.js
Unescape View File

@ -0,0 +1,34 @@
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';
import Quiz from '@/components/Quiz.vue';
import NotFound from '@/views/NotFound.vue';
Vue.use(Router);
const router = new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/quiz/:id',
name: 'Quiz',
component: Quiz,
},
{
path: '/:pathMatch(.*)*',
name: 'NotFound',
component: NotFound,
meta: { title: 'Not Found' },
},
],
});
router.beforeEach((to, from, next) => {
next();
});
export default router;

75
quiz-app/src/views/Home.vue
Unescape View File

@ -0,0 +1,75 @@
<template>
<div>
<router-link class="link" to="quiz/1"
>Lesson 1: Pre-Lecture Quiz</router-link
>
<router-link to="quiz/2">Lesson 1: Post-Lecture Quiz</router-link>
<router-link class="link" to="quiz/3"
>Lesson 2: Pre-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/4"
>Lesson 2: Post-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/5"
>Lesson 3: Pre-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/6"
>Lesson 3: Post-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/7"
>Lesson 4: Pre-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/8"
>Lesson 4: Post-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/9"
>Lesson 5: Pre-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/10"
>Lesson 5: Post-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/11"
>Lesson 6: Pre-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/12"
>Lesson 6: Post-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/13"
>Lesson 7: Pre-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/14"
>Lesson 7: Post-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/15"
>Lesson 8: Pre-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/16"
>Lesson 8: Post-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/17"
>Lesson 9: Pre-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/18"
>Lesson 9: Post-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/19"
>Lesson 10: Pre-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/20"
>Lesson 10: Post-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/21"
>Lesson 11: Pre-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/22"
>Lesson 11: Post-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/23"
>Lesson 12: Pre-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/24"
>Lesson 12: Post-Lecture Quiz</router-link
>
</div>
</template>

5
quiz-app/src/views/NotFound.vue
Unescape View File

@ -0,0 +1,5 @@
<template>
<div>
<p>Sorry, wrong number!</p>
</div>
</template>
Write Preview
Loading…
Cancel
Save