Merge branch 'main' of https://github.com/microsoft/Web-Dev-For-Beginners into main

.github/workflows/azure-static-web-apps-nice-beach-0fe9e9d0f.yml

@@ -0,0 +1,45 @@
+name: Azure Static Web Apps CI/CD
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    types: [opened, synchronize, reopened, closed]
+    branches:
+      - main
+
+jobs:
+  build_and_deploy_job:
+    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
+    runs-on: ubuntu-latest
+    name: Build and Deploy Job
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          submodules: true
+      - name: Build And Deploy
+        id: builddeploy
+        uses: Azure/static-web-apps-deploy@v0.0.1-preview
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_NICE_BEACH_0FE9E9D0F }}
+          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
+          action: "upload"
+          ###### Repository/Build Configurations - These values can be configured to match you app requirements. ######
+          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
+          app_location: "/quiz-app" # App source code path
+          api_location: "api" # Api source code path - optional
+          output_location: "dist" # Built app content directory - optional
+          ###### End of Repository/Build Configurations ######
+
+  close_pull_request_job:
+    if: github.event_name == 'pull_request' && github.event.action == 'closed'
+    runs-on: ubuntu-latest
+    name: Close Pull Request Job
+    steps:
+      - name: Close Pull Request
+        id: closepullrequest
+        uses: Azure/static-web-apps-deploy@v0.0.1-preview
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_NICE_BEACH_0FE9E9D0F }}
+          action: "close"

.gitignore

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

1-getting-started-lessons/1-intro-to-programming-languages/README.md

@@ -6,7 +6,7 @@ This lesson covers the basics of programming languages. The topics covered here
 > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
 
 ## Pre-Lecture Quiz
-[Pre-lecture quiz](.github/pre-lecture-quiz.md)
+[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/1)
 
 ## Introduction
 
@@ -181,7 +181,7 @@ When a developer wants to learn something new, they'll most likely turn to docum
 Compare some programming languages. What are some of the unique traits of JavaScript vs. Java? How about COBOL vs. Go?
 
 ## Post-Lecture Quiz
-[Post-lecture quiz](.github/post-lecture-quiz.md)
+[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/2)
 
 ## Review & Self Study
 

1-getting-started-lessons/2-github-basics/README.md

@@ -6,7 +6,7 @@ This lesson covers the basics of GitHub, a platform to host and manage changes t
 > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
 
 ## Pre-Lecture Quiz
-[Pre-lecture quiz](.github/pre-lecture-quiz.md)
+[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/3)
 
 ## Introduction
 
@@ -299,7 +299,7 @@ Projects might also have discussion in forums, mailing lists, or chat channels l
 Pair with a friend to work on each other's code. Create a project collaboratively, fork code, create branches, and merge changes.
 
 ## Post-Lecture Quiz
-[Post-lecture quiz](.github/post-lecture-quiz.md)
+[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/4)
 
 ## Review & Self Study
 

1-getting-started-lessons/3-accessibility/README.md

@@ -4,7 +4,7 @@
 > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
 
 ## Pre-Lecture Quiz
-[Pre-lecture quiz](.github/pre-lecture-quiz.md)
+[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/5)
 
 > The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
 >
@@ -216,7 +216,7 @@ Take this HTML and rewrite it to be as accessible as possible, given the strateg
 ```
 
 ## Post-Lecture Quiz
-[Post-lecture quiz](.github/post-lecture-quiz.md)
+[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/6)
 
 ## Review & Self Study
 

2-js-basics/1-data-types/README.md

@@ -4,7 +4,7 @@
 > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
 
 ## Pre-Lecture Quiz
-[Pre-lecture quiz](.github/pre-lecture-quiz.md)
+[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/7)
 
 This lesson covers the basics of JavaScript, the language that provides interactivity on the web.
 
@@ -185,7 +185,7 @@ Booleans can be only two values: `true` or `false`. Booleans can help make decis
 JavaScript is notorious for its surprising ways of handling datatypes on occasion. Do a bit of research on these 'gotchas'. For example: case sensitivity can bite! Try this in your console: `let age = 1; let Age = 2; age == Age` (resolves `false` -- why?). What other gotchas can you find?
 
 ## Post-Lecture Quiz
-[Post-lecture quiz](.github/post-lecture-quiz.md)
+[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/8)
 
 ## Review & Self Study
 

README.md

@@ -2,6 +2,8 @@
 
 Azure Cloud Advocates at Microsoft are pleased to offer a 12-week, 24-lesson curriculum all about JavaScript, CSS, and HTML basics. 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 Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees, and sketchnote artist Tomomi Imura!**
+
 > **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](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-4621-cxa) and by watching the videos mentioned below.

quiz-app/.gitignore

@@ -0,0 +1 @@
+node_modules

quiz-app/.vscode/settings.json

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

quiz-app/LICENSE

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

quiz-app/README.md

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

quiz-app/babel.config.js

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

quiz-app/package.json

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

quiz-app/public/index.html

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

quiz-app/public/routes.json

@@ -0,0 +1,8 @@
+{
+	"routes": [
+		{
+			"route": "/*",
+			"serve": "/index.html"
+		}
+	]
+}

quiz-app/src/App.vue

@@ -0,0 +1,82 @@
+<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: 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>
+

quiz-app/src/components/Quiz.vue

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

quiz-app/src/main.js

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

quiz-app/src/router/index.js

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

quiz-app/src/views/Home.vue

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

quiz-app/src/views/NotFound.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <p>Sorry, wrong number!</p>
+  </div>
+</template>