This commit is contained in:
Jen Looper 2021-02-05 13:51:17 -05:00
Коммит b38057b849
36 изменённых файлов: 27754 добавлений и 0 удалений

38
.github/ISSUE_TEMPLATE/bug_report.md поставляемый Normal file
Просмотреть файл

@ -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.

20
.github/ISSUE_TEMPLATE/feature_request.md поставляемый Normal file
Просмотреть файл

@ -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.

37
.github/PULL_REQUEST_TEMPLATE/translation_checklist.md поставляемый Normal file
Просмотреть файл

@ -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
.nojekyll Normal file
Просмотреть файл

9
CODE_OF_CONDUCT.md Normal file
Просмотреть файл

@ -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

14
CONTRIBUTING.md Normal file
Просмотреть файл

@ -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.

21
LICENSE Normal file
Просмотреть файл

@ -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.

68
README.md Normal file
Просмотреть файл

@ -0,0 +1,68 @@
--edit these badges for your curriculum--
[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pull/)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](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
[![Promo video](screenshot.png)](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>

21
TRANSLATIONS.md Normal file
Просмотреть файл

@ -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!

23
for-teachers.md Normal file
Просмотреть файл

@ -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).

26
index.html Normal file
Просмотреть файл

@ -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
![Embed a video here if available](video-url)
## [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 |
| -------- | --------- | -------- | ----------------- |
| | | | |

12
lesson/README.md Normal file
Просмотреть файл

@ -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)

1
quiz-app/.gitignore поставляемый Normal file
Просмотреть файл

@ -0,0 +1 @@
node_modules

21
quiz-app/LICENSE Normal 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 Normal 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 Normal file
Просмотреть файл

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

11941
quiz-app/package-lock.json сгенерированный Normal file

Разница между файлами не показана из-за своего большого размера Загрузить разницу

44
quiz-app/package.json Normal file
Просмотреть файл

@ -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"
]
}

Двоичные данные
quiz-app/public/favicon.ico Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 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"
}
]
}

109
quiz-app/src/App.vue Normal file
Просмотреть файл

@ -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>

Разница между файлами не показана из-за своего большого размера Загрузить разницу

Разница между файлами не показана из-за своего большого размера Загрузить разницу

Разница между файлами не показана из-за своего большого размера Загрузить разницу

Просмотреть файл

@ -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;

Разница между файлами не показана из-за своего большого размера Загрузить разницу

Разница между файлами не показана из-за своего большого размера Загрузить разницу

Разница между файлами не показана из-за своего большого размера Загрузить разницу

Просмотреть файл

@ -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>

14
quiz-app/src/main.js Normal file
Просмотреть файл

@ -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>