Merge branch 'main' into quiz-kr

pull/140/head
DaehunGwak 4 years ago
commit 96dcc4486c

@ -4,7 +4,7 @@
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## Pre-Lecture Quiz ## Pre-Lecture Quiz
[Pre-lecture quiz](.github/pre-lecture-quiz.md) [Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/9)
When we think about writing code, we always want to ensure our code is readable. While this sounds counterintuitive, code is read many more times than it's written. One core tool in a developer's toolbox to ensure maintainable code is the **function**. When we think about writing code, we always want to ensure our code is readable. While this sounds counterintuitive, code is read many more times than it's written. One core tool in a developer's toolbox to ensure maintainable code is the **function**.
@ -181,7 +181,7 @@ You've now seen we have three ways to pass a function as a parameter and might b
Can you articulate in one sentence the difference between functions and methods? Give it a try! Can you articulate in one sentence the difference between functions and methods? Give it a try!
## Post-Lecture Quiz ## Post-Lecture Quiz
[Post-lecture quiz](.github/post-lecture-quiz.md) [Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/10)
## Review & Self Study ## Review & Self Study

@ -5,7 +5,7 @@
## ##
Pre-Lecture Quiz Pre-Lecture Quiz
[Pre-lecture quiz](.github/pre-lecture-quiz.md) [Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/11)
Making decisions and controlling the order in which your code runs makes your code reusable and robust. This section covers the syntax for controlling data flow in JavaScript and its significance when used with Boolean data types Making decisions and controlling the order in which your code runs makes your code reusable and robust. This section covers the syntax for controlling data flow in JavaScript and its significance when used with Boolean data types
@ -28,10 +28,10 @@ Operators are used to evaluate conditions by making comparisons that will create
| Symbol | Description | Example | | Symbol | Description | Example |
| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| `<` | **Less than**: Compares two values and returns the `true` Boolean data type if the value on the left side is less than the right | `5 < 6 // true` | | `<` | **Less than**: Compares two values and returns the `true` Boolean data type if the value on the left side is less than the right | `5 < 6 // true` |
| `<=` | **Less than or equal to**: Compares two values and returns the `true` Boolean data type if the value on the left side is less than or equal to the right | `5 <= 6 // true` | | `<=` | **Less than or equal to**: Compares two values and returns the `true` Boolean data type if the value on the left side is less than or equal to the right | `5 <= 6 // true` |
| `>` | **Greater than**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than the right | `5 > 6 // false` | | `>` | **Greater than**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than the right | `5 > 6 // false` |
| `>=` | **Greater than or equal to**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than or equal to the right | `5 >= 6 // false` | | `>=` | **Greater than or equal to**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than or equal to the right | `5 >= 6 // false` |
| `===` | **Strict equality**: Compares two values and returns the `true` Boolean data type if values on the right and left are equal AND are the same data type. | `5 === 6 // false` | | `===` | **Strict equality**: Compares two values and returns the `true` Boolean data type if values on the right and left are equal AND are the same data type. | `5 === 6 // false` |
| `!==` | **Inequality**: Compares two values and returns the opposite Boolean value of what a strict equality operator would return | `5 !== 6 // true` | | `!==` | **Inequality**: Compares two values and returns the opposite Boolean value of what a strict equality operator would return | `5 !== 6 // true` |
@ -162,7 +162,7 @@ Create a program that is written first with logical operators, and then rewrite
## ##
Post-Lecture Quiz Post-Lecture Quiz
[Post-lecture quiz](.github/post-lecture-quiz.md) [Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/12)
## Review & Self Study ## Review & Self Study

@ -5,7 +5,7 @@
## ##
Pre-Lecture Quiz Pre-Lecture Quiz
[Pre-lecture quiz](.github/pre-lecture-quiz.md) [Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/13)
This lesson covers the basics of JavaScript, the language that provides interactivity on the web. In this lesson, you'll learn about arrays and loops, which are used to manipulate data. This lesson covers the basics of JavaScript, the language that provides interactivity on the web. In this lesson, you'll learn about arrays and loops, which are used to manipulate data.
@ -114,7 +114,7 @@ There are other ways of looping over arrays other than for and while loops. Ther
## ##
Post-Lecture Quiz Post-Lecture Quiz
[Post-lecture quiz](.github/post-lecture-quiz.md) [Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14)
## Review & Self Study ## Review & Self Study

@ -1,17 +1,17 @@
*Complete this quiz after the lesson by checking one answer per question.* *Complete this quiz after the lesson by checking one answer per question.*
1. [Spans and Divs are interchangeable] 1. Spans and Divs are interchangeable
- [ ] [true] - [ ] true
- [ ] [false] - [ ] false
2. [The head of an HTML doc can contain:] 2. The head of an HTML doc can contain:
- [ ] [the title tag] - [ ] the title tag
- [ ] [metadata] - [ ] metadata
- [ ] [all the above] - [ ] all the above
3. [You can't use deprecated tags in your markup] 3. You can't use deprecated tags in your markup
- [ ] [true] - [ ] true
- [ ] [false] - [ ] false
- [ ] [false, but they have been deprecated for good reason] - [ ] false, but they have been deprecated for good reason

@ -4,16 +4,16 @@ Complete this quiz in class
1. HTML stands for 'HyperText Mockup Language' 1. HTML stands for 'HyperText Mockup Language'
- [ ] [true] - [ ] true
- [ ] [false] - [ ] false
2. All HTML tags need both opening and closing tags 2. All HTML tags need both opening and closing tags
- [ ] [true] - [ ] true
- [ ] [false] - [ ] false
3. Using semantic markup is most important for 3. Using semantic markup is most important for
- [ ] [code readability] - [ ] code readability
- [ ] [screen readers] - [ ] screen readers
- [ ] [maintenance] - [ ] maintenance

@ -5,7 +5,7 @@
## Pre-Lecture Quiz ## Pre-Lecture Quiz
[Pre-lecture quiz](.github/pre-lecture-quiz.md) [Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/15)
### Introduction ### Introduction
@ -217,7 +217,7 @@ There are some wild 'older' tags in HTML that are still fun to play with, though
## Post-Lecture Quiz ## Post-Lecture Quiz
[Post-lecture quiz](.github/post-lecture-quiz.md) [Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/16)
## Review & Self Study ## Review & Self Study

@ -4,18 +4,18 @@ You will need to reference the following learn module to complete the quiz:
[Work with CSS](https://docs.microsoft.com/en-us/learn/modules/build-simple-website/4-css-basics) [Work with CSS](https://docs.microsoft.com/en-us/learn/modules/build-simple-website/4-css-basics)
1. [You can write CSS directly in the head section of your HTML file] 1. You can write CSS directly in the head section of your HTML file
- [ ] [true] - [ ] true
- [ ] [false] - [ ] false
1. [It's always necessary to include CSS in your app] 1. It's always necessary to include CSS in your app
- [ ] [true] - [ ] true
- [ ] [false] - [ ] false
- [ ] [false, but if you want it to look good you need CSS] - [ ] false, but if you want it to look good you need CSS
1. [Which browser tool can be used to inspect CSS?] 1. Which browser tool can be used to inspect CSS?
- [ ] [Elements] - [ ] Elements
- [ ] [Styles] - [ ] Styles
- [ ] [Network] - [ ] Network

@ -4,15 +4,15 @@ Complete this quiz in class
1. HTML elements must have either a class or an id in order to be styled 1. HTML elements must have either a class or an id in order to be styled
- [ ] [true] - [ ] true
- [ ] [false] - [ ] false
2. CSS stands for 'Complete Style Sheets' 2. CSS stands for 'Complete Style Sheets'
- [ ] [true] - [ ] true
- [ ] [false] - [ ] false
3. CSS can be used to create animations 3. CSS can be used to create animations
- [ ] [true] - [ ] true
- [ ] [false] - [ ] false

@ -5,7 +5,7 @@
## Pre-Lecture Quiz ## Pre-Lecture Quiz
[Pre-lecture quiz](.github/pre-lecture-quiz.md) [Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/17)
### Introduction ### Introduction
@ -252,7 +252,7 @@ To complete the post-lecture quiz, go through this Learn module: [Style your HTM
## Post-Lecture Quiz ## Post-Lecture Quiz
[Post-lecture quiz](.github/post-lecture-quiz.md) [Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/18)
## Review & Self Study ## Review & Self Study

@ -1,18 +1,18 @@
*Complete this quiz after the lesson by checking one answer per question.* *Complete this quiz after the lesson by checking one answer per question.*
1. [The DOM is a model to represent a document on the web] 1. The DOM is a model to represent a document on the web
- [ ] [true] - [ ] true
- [ ] [false] - [ ] false
2. [Use JavaScript closures to perform the following:] 2. Use JavaScript closures to perform the following:
- [ ] [write functions within functions] - [ ] write functions within functions
- [ ] [enclose the DOM] - [ ] enclose the DOM
- [ ] [close script blocks] - [ ] close script blocks
3. [Fill in the blank: Closures are useful when one or more functions need to access an outer function's ______] 3. Fill in the blank: Closures are useful when one or more functions need to access an outer function's...
- [ ] [arrays] - [ ] arrays
- [ ] [scope] - [ ] scope
- [ ] [functions] - [ ] functions

@ -4,15 +4,15 @@ Complete this quiz in class
1. The DOM stands for 'Document Object Management' 1. The DOM stands for 'Document Object Management'
- [ ] [true] - [ ] true
- [ ] [false] - [ ] false
2. The DOM can be thought of as a tree 2. The DOM can be thought of as a tree
- [ ] [true] - [ ] true
- [ ] [false] - [ ] false
3. Using the Web API, you can manipulate the DOM 3. Using the Web API, you can manipulate the DOM
- [ ] [true] - [ ] true
- [ ] [false] - [ ] false

@ -5,7 +5,7 @@
## Pre-Lecture Quiz ## Pre-Lecture Quiz
[Pre-lecture quiz](.github/pre-lecture-quiz.md) [Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/19)
### Introduction ### Introduction
@ -201,7 +201,7 @@ Add new event handler to your closure to do something more to the plants; for ex
## Post-Lecture Quiz ## Post-Lecture Quiz
[Post-lecture quiz](.github/post-lecture-quiz.md) [Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/20)
## Review & Self Study ## Review & Self Study

@ -2,7 +2,7 @@
Una pequeña meditación de código de arrastrar y soltar. Con un poco de HTML, JS y CSS, puede crear una interfaz web, darle estilo y agregar una interacción. Una pequeña meditación de código de arrastrar y soltar. Con un poco de HTML, JS y CSS, puede crear una interfaz web, darle estilo y agregar una interacción.
![mi terrario](screenshot_gray.png) ![mi terrario](../images/screenshot_gray.png)
# Lessons # Lessons

@ -2,7 +2,7 @@
## Pre-Lecture Quiz ## Pre-Lecture Quiz
[Pre-lecture quiz](../.github/pre-lecture-quiz.md) [Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/21)
## Event driven programming ## Event driven programming
@ -326,7 +326,7 @@ Add more functionality
## Post-Lecture Quiz ## Post-Lecture Quiz
[Post-lecture quiz](../.github/post-lecture-quiz.md) [Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/22)
## Review & Self Study ## Review & Self Study

@ -5,7 +5,7 @@
## Pre-Lecture Quiz ## Pre-Lecture Quiz
[Pre-lecture quiz](.github/pre-lecture-quiz.md) [Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/23)
### Introduction ### Introduction
@ -150,7 +150,7 @@ Take a look at a browser extension store and install one to your browser. You ca
## Post-Lecture Quiz ## Post-Lecture Quiz
[Post-lecture quiz](.github/post-lecture-quiz.md) [Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/24)
## Review & Self Study ## Review & Self Study

@ -2,7 +2,7 @@
## Pre-Lecture Quiz ## Pre-Lecture Quiz
[Pre-lecture quiz](.github/pre-lecture-quiz.md) [Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/25)
### Introduction ### Introduction
@ -210,7 +210,7 @@ We've discussed several types of API so far in these lessons. Choose a web API a
## Post-Lecture Quiz ## Post-Lecture Quiz
[Post-lecture quiz](.github/post-lecture-quiz.md) [Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/26)
## Review & Self Study ## Review & Self Study

@ -2,7 +2,7 @@
## Pre-Lecture Quiz ## Pre-Lecture Quiz
[Pre-lecture quiz](.github/pre-lecture-quiz.md) [Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/27)
### Introduction ### Introduction
@ -147,7 +147,7 @@ Investigate some open source web sites have been around a long time ago, and, ba
## Post-Lecture Quiz ## Post-Lecture Quiz
[Post-lecture quiz](.github/post-lecture-quiz.md) [Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/28)
## Review & Self Study ## Review & Self Study

@ -14,7 +14,7 @@ Esta extensión puede ser llamada ad hoc por un usuario una vez que se ingresa u
### Créditos ### Créditos
![a green browser extension](extension-screenshot.png) ![a green browser extension](../extension-screenshot.png)
## Créditos ## Créditos

@ -4,7 +4,7 @@ Un juego espacial para enseñar los fundamentos de JavaScript más avanzados
En esta lección aprenderás a construir tu propio juego espacial. Si alguna vez has jugado al juego "Space Invaders", este juego tiene la misma idea: dirigir una nave espacial y disparar a los monstruos que vienen desde arriba. Así es como se verá el juego terminado: En esta lección aprenderás a construir tu propio juego espacial. Si alguna vez has jugado al juego "Space Invaders", este juego tiene la misma idea: dirigir una nave espacial y disparar a los monstruos que vienen desde arriba. Así es como se verá el juego terminado:
![Finished game](pewpew.gif) ![Finished game](../images/pewpew.gif)
En estas seis lecciones aprenderá lo siguiente: En estas seis lecciones aprenderá lo siguiente:
@ -23,4 +23,4 @@ En estas seis lecciones aprenderá lo siguiente:
- [Mover elementos por la pantalla](moving-elements-around/README.md) - [Mover elementos por la pantalla](moving-elements-around/README.md)
- [Detección de colisiones](collision-detection/README.md) - [Detección de colisiones](collision-detection/README.md)
- [Manteniendo la puntuación](keeping-score/README.md) - [Manteniendo la puntuación](keeping-score/README.md)
- [Finalizar y reiniciar el juego](end-condition/README.md) - [Finalizar y reiniciar el juego](end-condition/README.md)

File diff suppressed because it is too large Load Diff

@ -1,7 +1,10 @@
<template> <template>
<div class="card"> <div class="card">
<div v-for="q in questions" :key="q.id"> <div v-for="q in questions" :key="q.id">
<div v-if="route == q.id"> <div v-if="route == q.id">
<h2>{{q.title}}</h2>
<hr/>
<h3 v-if="complete" class="message">{{ $t("complete") }}</h3> <h3 v-if="complete" class="message">{{ $t("complete") }}</h3>
<div v-else> <div v-else>
<h3 v-if="error" class="error">{{ $t("error") }}</h3> <h3 v-if="error" class="error">{{ $t("error") }}</h3>
@ -28,15 +31,20 @@
import messages from "@/assets/translations"; import messages from "@/assets/translations";
export default { export default {
name: "Quiz",
data() { data() {
return { return {
currentQuestion: 0, currentQuestion: 0,
complete: false, complete: false,
error: false, error: false,
route: "", route: "",
questions: this.$t("quizzes"),
}; };
}, },
computed: {
questions() {
return this.$t("quizzes");
}
},
i18n: { messages }, i18n: { messages },
methods: { methods: {
@ -56,8 +64,6 @@ export default {
}, },
}, },
created() { created() {
//console.log(this.$root.$i18n.locale,this.$i18n.locale);
//this.questions = this.$i18n.messages + "." + this.$i18n.locale;
this.route = this.$route.params.id; this.route = this.$route.params.id;
}, },
}; };

@ -1,75 +1,26 @@
<template> <template>
<div> <div>
<router-link class="link" to="quiz/1" <router-link
>Lesson 1: Pre-Lecture Quiz</router-link v-for="q in questions"
> :key="q.id"
<router-link to="quiz/2">Lesson 1: Post-Lecture Quiz</router-link> :to="`quiz/${q.id}`"
<router-link class="link" to="quiz/3" class="link"
>Lesson 2: Pre-Lecture Quiz</router-link >
> {{ q.title }}
<router-link class="link" to="quiz/4" </router-link>
>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> </div>
</template> </template>
<script>
import messages from "@/assets/translations";
export default {
name: "Home",
computed: {
questions() {
return this.$t("quizzes");
},
},
i18n: { messages },
};
</script>
Loading…
Cancel
Save