Jen Looper
3 years ago
commit
b38057b849
@ -0,0 +1,38 @@
|
||||
---
|
||||
name: Bug report
|
||||
about: Create a report to help us improve
|
||||
title: ''
|
||||
labels: ''
|
||||
assignees: ''
|
||||
|
||||
---
|
||||
|
||||
**Describe the bug**
|
||||
A clear and concise description of what the bug is.
|
||||
|
||||
**To Reproduce**
|
||||
Steps to reproduce the behavior:
|
||||
1. Go to '...'
|
||||
2. Click on '....'
|
||||
3. Scroll down to '....'
|
||||
4. See error
|
||||
|
||||
**Expected behavior**
|
||||
A clear and concise description of what you expected to happen.
|
||||
|
||||
**Screenshots**
|
||||
If applicable, add screenshots to help explain your problem.
|
||||
|
||||
**Desktop (please complete the following information):**
|
||||
- OS: [e.g. iOS]
|
||||
- Browser [e.g. chrome, safari]
|
||||
- Version [e.g. 22]
|
||||
|
||||
**Smartphone (please complete the following information):**
|
||||
- Device: [e.g. iPhone6]
|
||||
- OS: [e.g. iOS8.1]
|
||||
- Browser [e.g. stock browser, safari]
|
||||
- Version [e.g. 22]
|
||||
|
||||
**Additional context**
|
||||
Add any other context about the problem here.
|
||||
@ -0,0 +1,20 @@
|
||||
---
|
||||
name: Feature request
|
||||
about: Suggest an idea for this project
|
||||
title: ''
|
||||
labels: ''
|
||||
assignees: ''
|
||||
|
||||
---
|
||||
|
||||
**Is your feature request related to a problem? Please describe.**
|
||||
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
|
||||
|
||||
**Describe the solution you'd like**
|
||||
A clear and concise description of what you want to happen.
|
||||
|
||||
**Describe alternatives you've considered**
|
||||
A clear and concise description of any alternative solutions or features you've considered.
|
||||
|
||||
**Additional context**
|
||||
Add any other context or screenshots about the feature request here.
|
||||
@ -0,0 +1,37 @@
|
||||
## Track translation progress by opening a draft PR using this template and checking off the translations completed
|
||||
|
||||
Each lesson includes a translation of the README.md and the Assignment.md file, if available. Only mark the lesson complete if both those files are translated per lesson, please.
|
||||
|
||||
- [ ] 1
|
||||
- [ ] 1-1
|
||||
- [ ] 1-2
|
||||
- [ ] 1-3
|
||||
- [ ] 2
|
||||
- [ ] 2-1
|
||||
- [ ] 2-2
|
||||
- [ ] 2-3
|
||||
- [ ] 2-4
|
||||
- [ ] 3
|
||||
- [ ] 3-1
|
||||
- [ ] 3-2
|
||||
- [ ] 3-3
|
||||
- [ ] 4
|
||||
- [ ] 4-1
|
||||
- [ ] 5
|
||||
- [ ] 5-1
|
||||
- [ ] 5-2
|
||||
- [ ] 5-3
|
||||
- [ ] 6
|
||||
- [ ] 6-1
|
||||
- [ ] 6-2
|
||||
- [ ] 6-3
|
||||
- [ ] 6-4
|
||||
- [ ] 6-5
|
||||
- [ ] 6-6
|
||||
- [ ] 7
|
||||
- [ ] 7-1
|
||||
- [ ] 7-2
|
||||
- [ ] 7-3
|
||||
- [ ] 7-4
|
||||
|
||||
- [ ] Quiz (add a file in the quiz-app with all localizations)
|
||||
@ -0,0 +1,9 @@
|
||||
# Microsoft Open Source Code of Conduct
|
||||
|
||||
This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
|
||||
|
||||
Resources:
|
||||
|
||||
- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
|
||||
- [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/)
|
||||
- Contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with questions or concerns
|
||||
@ -0,0 +1,14 @@
|
||||
# Contributing
|
||||
|
||||
This project welcomes contributions and suggestions. Most contributions require you to
|
||||
agree to a Contributor License Agreement (CLA) declaring that you have the right to,
|
||||
and actually do, grant us the rights to use your contribution. For details, visit
|
||||
https://cla.microsoft.com.
|
||||
|
||||
When you submit a pull request, a CLA-bot will automatically determine whether you need
|
||||
to provide a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the
|
||||
instructions provided by the bot. You will only need to do this once across all repositories using our CLA.
|
||||
|
||||
This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
|
||||
For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/)
|
||||
or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
|
||||
@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2021 Jen Looper
|
||||
|
||||
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.
|
||||
@ -0,0 +1,68 @@
|
||||
--edit these badges for your curriculum--
|
||||
|
||||
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pull/)
|
||||
[](http://makeapullrequest.com)
|
||||
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
||||
|
||||
|
||||
# Your Curriculum Title for Beginners - A Curriculum
|
||||
|
||||
Azure Cloud Advocates at Microsoft are pleased to offer a 12-week, 24-lesson curriculum all about .... Each lesson includes pre- and post-lesson quizzes, written instructions to complete the lesson, a solution, an assignment and more. Our project-based pedagogy allows you to learn while building, a proven way for new skills to 'stick'.
|
||||
|
||||
**Hearty thanks to our authors (list all authors here)**
|
||||
|
||||
> **Teachers**, we have [included some suggestions](for-teachers.md) on how to use this curriculum. If you would like to create your own lessons, we have also included a [lesson template](lesson-template/README.md)
|
||||
|
||||
> **Students**, to use this curriculum on your own, fork the entire repo and complete the exercises on your own, starting with a pre-lecture quiz, then reading the lecture and completing the rest of the activities. Try to create the projects by comprehending the lessons rather than copying the solution code; however that code is available in the /solutions folders in each project-oriented lesson. Another idea would be to form a study group with friends and go through the content together. For further study, we recommend [Microsoft Learn](create a Learn collection and post it here) and by watching the videos mentioned below.
|
||||
|
||||
> Your promo video here
|
||||
[](https://youtube.com/watch?v=R1wrdtmBSII "Promo video")
|
||||
|
||||
> Click the image above for a video about the project and the folks who created it!
|
||||
|
||||
## Pedagogy
|
||||
|
||||
We have chosen two pedagogical tenets while building this curriculum: ensuring that it is project-based and that it includes frequent quizzes. By the end of this series, students will have built a typing game, a virtual terrarium, a 'green' browser extension, a 'space invaders' type game, and a business-type banking app, and will have learned the basics of JavaScript, HTML, and CSS along with the modern toolchain of today's web developer.
|
||||
|
||||
By ensuring that the content aligns with projects, the process is made more engaging for students and retention of concepts will be augmented. We also wrote several starter lessons in JavaScript basics to introduce concepts, paired with video from the "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-13441-cxa)" collection of video tutorials, some of whose authors contributed to this curriculum.
|
||||
|
||||
In addition, a low-stakes quiz before a class sets the intention of the student towards learning a topic, while a second quiz after class ensures further retention. This curriculum was designed to be flexible and fun and can be taken in whole or in part. The projects start small and become increasingly complex by the end of the 12 week cycle.
|
||||
|
||||
> Find our [Code of Conduct](CODE_OF_CONDUCT.md), [Contributing](CONTRIBUTING.md), and [Translation](TRANSLATIONS.md) guidelines. We welcome your constructive feedback!
|
||||
>
|
||||
## Each lesson includes:
|
||||
|
||||
- optional sketchnote
|
||||
- optional supplemental video
|
||||
- pre-lesson warmup quiz
|
||||
- written lesson
|
||||
- for project-based lessons, step-by-step guides on how to build the project
|
||||
- knowledge checks
|
||||
- a challenge
|
||||
- supplemental reading
|
||||
- assignment
|
||||
- post-lesson quiz
|
||||
|
||||
> **A note about quizzes**: All quizzes are contained [in this app](link a quiz app here), for 48 total quizzes of three questions each. They are linked from within the lessons but the quiz app can be run locally; follow the instruction in the `quiz-app` folder. They are gradually being localized.
|
||||
|
||||
## Lessons
|
||||
|
||||
| | Project Name | Concepts Taught | Learning Objectives | Linked Lesson | Written Lesson | Sketchnote | Assignment | Starting Quiz | Ending Quiz | Video | Author |
|
||||
| :---: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :------------: | :--------: | :--------: | :-----------: | :---------: | :---: | :---------------------: |
|
||||
| 01 | First Lesson Concept | First Lesson Title | Concept | [link](README.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Author |
|
||||
|
||||
|
||||
## Offline access
|
||||
|
||||
You can run this documentation offline by using [Docsify](https://docsify.js.org/#/). Fork this repo, [install Docsify](https://docsify.js.org/#/quickstart) on your local machine, and then in the root folder of this repo, type `docsify serve`. The website will be served on port 3000 on your localhost: `localhost:3000`.
|
||||
|
||||
<create a track git>
|
||||
<a href="https://trackgit.com">
|
||||
<img src="https://us-central1-trackgit-analytics.cloudfunctions.net/token/ping/kkcxjd6o25veljfkpm9k" alt="trackgit-views" />
|
||||
</a>
|
||||
@ -0,0 +1,21 @@
|
||||
# Contribute by translating lessons
|
||||
|
||||
We welcome translations for the lessons in this curriculum!
|
||||
|
||||
## Guidelines
|
||||
|
||||
There are [**translations**](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages/translations) folders which contain the translated markdown files.
|
||||
|
||||
Translated lessons should follow this naming convention:
|
||||
|
||||
**README._[language]_.md**
|
||||
|
||||
where _[language]_ is a two letter language abbreviation following the ISO 639-1 standard (e.g. `README.es.md` for Spanish and `README.nl.md` for Dutch).
|
||||
|
||||
**Quizzes**
|
||||
|
||||
Add your translation to the quiz-app by adding a file here: https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/quiz-app/src/assets/translations. Please don't localize the words 'true' or 'false' however. thanks!
|
||||
|
||||
**THANK YOU**
|
||||
|
||||
We truly appreciate your efforts!
|
||||
@ -0,0 +1,23 @@
|
||||
## For Educators
|
||||
|
||||
Would you like to use this curriculum in your classroom? Please feel free!
|
||||
|
||||
In fact, you can use it within GitHub itself by using GitHub Classroom.
|
||||
|
||||
To do that, fork this repo. You are going to need to create a repo for each lesson, so you're going to need to extract each folder into a separate repo. That way, [GitHub Classroom](https://classroom.github.com/classrooms) can pick up each lesson separately.
|
||||
|
||||
These [full instructions](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) will give you an idea how to set up your classroom.
|
||||
|
||||
## Using the repo as is
|
||||
|
||||
If you would like to use this repo as it currently stands, without using GitHub Classroom, that can be done as well. You would need to communicate with your students which lesson to work through together.
|
||||
|
||||
In an online format (Zoom, Teams, or other) you might form breakout rooms for the quizzes, and mentor students to help them get ready to learn. Then invite students to for the quizzes and submit their answers as 'issues' at a certain time. You might do the same with assignments, if you want students to work collaboratively out in the open.
|
||||
|
||||
If you prefer a more private format, ask your students to fork the curriculum, lesson by lesson, to their own GitHub repos as private repos, and give you access. Then they can complete quizzes and assignments privately and submit them to you via issues on your classroom repo.
|
||||
|
||||
There are many ways to make this work in an online classroom format. Please let us know what works best for you!
|
||||
|
||||
## Please give us your thoughts!
|
||||
|
||||
We want to make this curriculum work for you and your students. Please give us [feedback](https://forms.microsoft.com/Pages/ResponsePage.aspx?id=v4j5cvGGr0GRqy180BHbR2humCsRZhxNuI79cm6n0hRUQzRVVU9VVlU5UlFLWTRLWlkyQUxORTg5WS4u).
|
||||
@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="description" content="Description">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script>
|
||||
window.$docsify = {
|
||||
name: 'Your Curriculum Name',
|
||||
repo: 'https://github.com/microsoft/curriculum-repo-name',
|
||||
relativePath: true
|
||||
}
|
||||
</script>
|
||||
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,53 @@
|
||||
# [Lesson Topic]
|
||||
|
||||
Add a sketchnote if possible/appropriate
|
||||
|
||||
|
||||
|
||||
## [Pre-lecture quiz](link-to-quiz-app)
|
||||
|
||||
Describe what we will learn
|
||||
|
||||
### Introduction
|
||||
|
||||
Describe what will be covered
|
||||
|
||||
> Notes
|
||||
|
||||
### Prerequisite
|
||||
|
||||
What steps should have been covered before this lesson?
|
||||
|
||||
### Preparation
|
||||
|
||||
Preparatory steps to start this lesson
|
||||
|
||||
---
|
||||
|
||||
[Step through content in blocks]
|
||||
|
||||
## [Topic 1]
|
||||
|
||||
### Task:
|
||||
|
||||
Work together to progressively enhance your codebase to build the project with shared code:
|
||||
|
||||
```html
|
||||
code blocks
|
||||
```
|
||||
|
||||
✅ Knowledge Check - use this moment to stretch students' knowledge with open questions
|
||||
|
||||
## [Topic 2]
|
||||
|
||||
## [Topic 3]
|
||||
|
||||
🚀 Challenge: Add a challenge for students to work on collaboratively in class to enhance the project
|
||||
|
||||
Optional: add a screenshot of the completed lesson's UI if appropriate
|
||||
|
||||
## [Post-lecture quiz](link-to-quiz-app)
|
||||
|
||||
## Review & Self Study
|
||||
|
||||
**Assignment**: [Assignment Name](assignment.md)
|
||||
@ -0,0 +1,9 @@
|
||||
# [Assignment Name]
|
||||
|
||||
## Instructions
|
||||
|
||||
## Rubric
|
||||
|
||||
| Criteria | Exemplary | Adequate | Needs Improvement |
|
||||
| -------- | --------- | -------- | ----------------- |
|
||||
| | | | |
|
||||
@ -0,0 +1,12 @@
|
||||
# Getting Started with
|
||||
|
||||
In this section of the curriculum, you will be introduced to ...
|
||||
|
||||
### Topics
|
||||
|
||||
1. [Introduction to](1-intro-to/README.md)
|
||||
|
||||
|
||||
### Credits
|
||||
|
||||
"Introduction to" was written with ♥️ by [Name](Twitter)
|
||||
@ -0,0 +1 @@
|
||||
node_modules
|
||||
@ -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.
|
||||
@ -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
|
||||
@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,44 @@
|
||||
{
|
||||
"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-i18n": "^8.22.2",
|
||||
"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"
|
||||
]
|
||||
}
|
||||
|
After Width: | Height: | Size: 17 KiB |
@ -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>
|
||||
@ -0,0 +1,8 @@
|
||||
{
|
||||
"routes": [
|
||||
{
|
||||
"route": "/*",
|
||||
"serve": "/index.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<div>
|
||||
<nav>
|
||||
<router-link class="navlink" to="/">Home</router-link>
|
||||
<label for="locale">locale</label>
|
||||
<select v-model="locale">
|
||||
<option>en</option>
|
||||
<option>ko</option>
|
||||
<option>id</option>
|
||||
<option>hi</option>
|
||||
<option>it</option>
|
||||
</select>
|
||||
</nav>
|
||||
<div id="app">
|
||||
<h1>{{ $t("title") }}</h1>
|
||||
<router-view>
|
||||
<Quiz />
|
||||
</router-view>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Quiz from "@/components/Quiz.vue";
|
||||
import messages from "@/assets/translations";
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
i18n: { messages },
|
||||
components: {
|
||||
Quiz,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
locale: "en",
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
locale(val) {
|
||||
this.$root.$i18n.locale = val;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (this.$route.query.loc) {
|
||||
this.locale = this.$route.query.loc;
|
||||
}
|
||||
},
|
||||
};
|
||||
</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;
|
||||
}
|
||||
.error {
|
||||
color: red;
|
||||
}
|
||||
.card {
|
||||
width: 60%;
|
||||
border: #252d4a solid;
|
||||
border-radius: 5px;
|
||||
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>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,20 @@
|
||||
// index.js
|
||||
import en from './en.json';
|
||||
import ko from './ko.json';
|
||||
import id from './id.json';
|
||||
import hi from './hi.json';
|
||||
import it from './it.json';
|
||||
import ja from './ja.json';
|
||||
|
||||
//export const defaultLocale = 'en';
|
||||
|
||||
const messages = {
|
||||
en: en[0],
|
||||
ko: ko[0],
|
||||
id: id[0],
|
||||
hi: hi[0],
|
||||
it: it[0],
|
||||
ja: ja[0],
|
||||
};
|
||||
|
||||
export default messages;
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<div v-for="q in questions" :key="q.id">
|
||||
<div v-if="route == q.id">
|
||||
<h2>{{ q.title }}</h2>
|
||||
<hr />
|
||||
<h3 v-if="complete" class="message">{{ $t("complete") }}</h3>
|
||||
<div v-else>
|
||||
<h3 v-if="error" class="error">{{ $t("error") }}</h3>
|
||||
<h2>
|
||||
{{ q.quiz[currentQuestion].questionText }}
|
||||
</h2>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import messages from "@/assets/translations";
|
||||
|
||||
export default {
|
||||
name: "Quiz",
|
||||
data() {
|
||||
return {
|
||||
currentQuestion: 0,
|
||||
complete: false,
|
||||
error: false,
|
||||
route: "",
|
||||
locale: "",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
questions() {
|
||||
return this.$t("quizzes");
|
||||
},
|
||||
},
|
||||
|
||||
i18n: { messages },
|
||||
methods: {
|
||||
handleAnswerClick(isCorrect) {
|
||||
this.error = false;
|
||||
let nextQuestion = this.currentQuestion + 1;
|
||||
if (isCorrect == "true") {
|
||||
//always 3 questions per quiz
|
||||
if (nextQuestion < 3) {
|
||||
this.currentQuestion = nextQuestion;
|
||||
} else {
|
||||
this.complete = true;
|
||||
}
|
||||
} else {
|
||||
this.error = true;
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.route = this.$route.params.id;
|
||||
this.locale = this.$route.query.loc;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,14 @@
|
||||
import Vue from 'vue';
|
||||
import App from './App.vue';
|
||||
Vue.config.productionTip = false;
|
||||
import router from './router';
|
||||
|
||||
import VueI18n from 'vue-i18n';
|
||||
Vue.use(VueI18n);
|
||||
|
||||
const i18n = new VueI18n({
|
||||
locale: 'en',
|
||||
fallbackLocale: 'en',
|
||||
});
|
||||
|
||||
new Vue({ i18n, router, render: (h) => h(App) }).$mount('#app');
|
||||
@ -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;
|
||||
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div>
|
||||
<router-link
|
||||
v-for="q in questions"
|
||||
:key="q.id"
|
||||
:to="`quiz/${q.id}`"
|
||||
class="link"
|
||||
>
|
||||
{{ q.title }}
|
||||
</router-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import messages from "@/assets/translations";
|
||||
|
||||
export default {
|
||||
name: "Home",
|
||||
computed: {
|
||||
questions() {
|
||||
return this.$t("quizzes");
|
||||
},
|
||||
},
|
||||
i18n: { messages },
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<p>Sorry, wrong number!</p>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
Reference in new issue