From 573b05bfc0cb5f865d9e1d59781748c59e4f1448 Mon Sep 17 00:00:00 2001 From: Yuuki Ebihara Date: Fri, 1 Jan 2021 21:40:45 +0900 Subject: [PATCH 01/17] translate 4-typing-game into japanese --- 4-typing-game/translations/README.ja.md | 30 ++ .../typing-game/translations/README.ja.md | 337 ++++++++++++++++++ .../typing-game/translations/assignment.ja.md | 12 + 3 files changed, 379 insertions(+) create mode 100644 4-typing-game/translations/README.ja.md create mode 100644 4-typing-game/typing-game/translations/README.ja.md create mode 100644 4-typing-game/typing-game/translations/assignment.ja.md diff --git a/4-typing-game/translations/README.ja.md b/4-typing-game/translations/README.ja.md new file mode 100644 index 00000000..17458bd5 --- /dev/null +++ b/4-typing-game/translations/README.ja.md @@ -0,0 +1,30 @@ +# イベント駆動型プログラミング - タイピングゲームの構築 + +## イントロダクション + +タイピングは、開発者が最も過小評価されているスキルの一つです。頭の中からエディタに思考を素早く転送する能力は、創造性が自由に流れることを可能にします。最高の学習方法の一つは、ゲームをプレイすることです! + +> ということで、タイピングゲームを作ってみましょう! + +これまで培ってきた JavaScript、HTML、CSS のスキルを使ってタイピングゲームを作っていただきます。このゲームでは、プレイヤーにランダムな引用文 ([シャーロック・ホームズ](https://en.wikipedia.org/wiki/Sherlock_Holmes)の名言を使用しています) を提示し、それを正確に入力するのにどれくらいの時間がかかるかを競います。これまでに培った JavaScript、HTML、CSS のスキルを使ってタイピングゲームを作ってみましょう。 + +![demo](images/demo.gif) + +## 前提条件 + +このレッスンでは、次のような概念に精通していることを前提としています: + +- テキスト入力とボタンコントロールの作成 +- CSS とクラスを使ったスタイルの設定 +- JavaScript の基礎 + - 配列の作成 + - 乱数の生成 + - 現在の時刻の取得 + +## レッスン + +[イベント駆動型プログラミングを用いたタイピングゲームの作成](./typing-game/translations/README.ja.md) + +## クレジット + +Written with ♥️ by [Christopher Harrison](http://www.twitter.com/geektrainer) diff --git a/4-typing-game/typing-game/translations/README.ja.md b/4-typing-game/typing-game/translations/README.ja.md new file mode 100644 index 00000000..7047d875 --- /dev/null +++ b/4-typing-game/typing-game/translations/README.ja.md @@ -0,0 +1,337 @@ +# イベントを使ったゲームの作成 + +## レクチャー前クイズ + +[レクチャー前クイズ](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/21) + +## イベント駆動型プログラミング + +ブラウザベースのアプリケーションを作成するとき、私たちは、構築したものと対話するときに使用するグラフィカル・ユーザー・インターフェース (GUI) を提供します。ブラウザと対話する最も一般的な方法は、様々な要素をクリックしたり入力したりすることです。開発者として直面する課題は、ユーザーがこれらの操作をいつ実行するかわからないことです。 + +[イベント駆動型プログラミング](https://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E9%A7%86%E5%8B%95%E5%9E%8B%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0)は、GUIを作成するために必要なプログラミングの種類の名前です。このフレーズを少し分解すると、ここでの核となる単語は **イベント** です。[イベント](https://www.merriam-webster.com/dictionary/event)は、Merriam-Webster によると、「何かが起こる」と定義されています。これは私たちの状況を完璧に説明しています。何かが起こりそうで、それに対応してコードを実行したいのですが、それがいつ行われるかはわかりません。 + +実行したいコードの節をマークする方法は、関数を作成することです。[手続き型プログラミング](https://ja.wikipedia.org/wiki/%E6%89%8B%E7%B6%9A%E3%81%8D%E5%9E%8B%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0)を考えると、関数は決まった順番で呼び出されます。これはイベント駆動型プログラミングでも同じことが言えそうです。違いは、関数が**どのように**呼ばれるかということです。 + +イベント (ボタンクリックやタイピングなど) を処理するために、**イベントリスナー** を登録します。イベントリスナーとは、イベントが発生するのを待ち受けて、それに応じて実行する関数のことです。イベントリスナーは、UI を更新したり、サーバーへの呼び出しを行ったり、ユーザーのアクションに反応して実行することができます。[addEventListener](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener) を使用してイベントリスナーを追加し、実行する関数を提供します。 + +> **注:** イベントリスナーを作成する方法は数多くあります。匿名の関数を使うこともできますし、名前付きの関数を作ることもできます。`click` プロパティを設定したり、`addEventListener` を使用したりと、様々なショートカットを使用することができます。今回の演習では `addEventLister` と匿名関数に焦点を当てます。また、`addEventListener` はすべてのイベントに対して動作し、イベント名をパラメータとして指定できるので、最も柔軟性があります。 + +### 共通イベント + +アプリケーションを作成するときに聞くことができる[多数のイベント](https://developer.mozilla.org/ja/docs/Web/Events)があります。基本的に、ユーザーがページ上で何かをするとイベントが発生しますが、これはプレイヤーがあなたの意図した経験を得られるようにするうえで大きな力となります。幸いなことに、通常はほんの一握りのイベントしか必要ありません。ここでは、(ゲームを作成する際に使用する 2 つのイベントを含む) いくつかの一般的なイベントを紹介します: + +- [click](https://developer.mozilla.org/ja/docs/Web/API/Element/click_event): ユーザーが何かをクリックした場合、通常はボタンやハイパーリンクをクリックします +- [contextmenu](https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event): ユーザーがマウスの右ボタンをクリックした場合 +- [select](https://developer.mozilla.org/ja/docs/Web/API/Element/select_event): ユーザーがテキストをハイライトした場合 +- [input](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/input_event): ユーザーが何かテキストを入力した場合 + +## ゲームの作成 + +私たちは、JavaScript でイベントがどのように機能するかを探求するゲームを作成する予定です。私たちのゲームはプレイヤーのタイピングスキルをテストしますが、これはすべての開発者が持つべき最も過小評価されているスキルの一つです。私たちは皆、タイピングの練習をするべきです! ゲームの一般的な流れは以下のようになります。 + +- プレイヤーがスタートボタンをクリックすると、入力する名言が表示されます +- プレイヤーは、テキストボックスにできるだけ早く名言を入力します + - 各単語が完成すると、次の単語が強調表示されます + - プレイヤーにタイプミスがあった場合、テキストボックスが赤に更新されます + - 名言が完了すると、経過時間とともに成功メッセージが表示されます + +ゲームを作ってイベントを覚えましょう! + +### ファイル構造 + +**index.html**、**script.js**、**style.css** の 3 つのファイルが必要です。まずはこれらを設定して、生活を少し楽にしていきましょう。 + +- コンソールまたはターミナルウィンドウを開き、以下のコマンドを実行して、作業用の新しいフォルダを作成します + +```bash +# Linux または macOS +mkdir typing-game && cd typing-game + +# Windows +md typing-game && cd typing game +``` + +- Visual Studio Code を開きます + +```bash +code . +``` + +- Visual Studio Code のフォルダに以下の名前で3つのファイルを追加します + - index.html + - script.js + - style.css + +## ユーザーインターフェースの作成 + +要件を探ってみると、HTML ページには一握りの要素が必要になることがわかります。これはレシピのようなもので、いくつかの材料が必要です。 + +- ユーザーが入力するための名言を表示する場所 +- 成功メッセージのようなメッセージを表示する場所 +- 入力用のテキストボックス +- スタートボタン + +これらのファイルにはそれぞれ ID が必要なので、JavaScript でそれらを扱うことができます。また、これから作成する CSS と JavaScript ファイルへの参照を追加します。 + +**index.html** という名前の新しいファイルを作成します。以下の HTML を追加します。 + +```html + + + + タイピングゲーム + + + +

タイピングゲーム!

+

シャーロック・ホームズの名言を使ってタイピングの練習をしましょう。**スタート** をクリックしてください。

+

+

+
+ + +
+ + + +``` + +### アプリケーションの起動 + +物事がどのように見えるかを確認するためには、常に反復的に開発するのがベストです。アプリケーションを起動してみましょう。Visual Studio Code には [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) と呼ばれる素晴らしい拡張機能があり、アプリケーションをローカルにホストし、保存するたびにブラウザを更新します。 + +- リンクを辿り、**Install** をクリックして、[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) をインストールします + - ブラウザで Visual Studio Code を開き、Visual Studioコードでインストールを実行するように促されます + - プロンプトが表示されたら Visual Studio Code を再起動します +- インストールしたら、Visual Studio Code で Ctl-Shift-P (または Cmd-Shift-P) をクリックして、コマンドパレットを開きます +- **Live Server: Open with Live Server** と入力します + - Live Server がアプリケーションのホスティングを開始します +- ブラウザを開き、**https://localhost:5500** に移動します +- これで作成したページが表示されるはずです! + +機能を追加してみましょう。 + +## CSS の追加 + +HTML を作成したので、コアスタイリング用の CSS を追加してみましょう。プレイヤーが入力すべき単語をハイライトし、入力した内容が間違っている場合はテキストボックスに色をつけます。これには 2 つのクラスを使用します。 + +**style.css** という名前のファイルを新規作成し、以下の構文を追加します。 + +```css +/* style.css の中身 */ +.highlight { + background-color: yellow; +} + +.error { + background-color: lightcoral; + border: red; +} +``` + +✅ CSS に関しては、あなたが好きなようにページをレイアウトすることができます。少し時間をかけて、より魅力的なページにしてみましょう。 + +- 別のフォントを選択します +- ヘッダーに色をつけます +- アイテムのサイズを変更します + +## JavaScript + +UI を作成したので、ロジックを提供する JavaScript に注目してみましょう。これをいくつかのステップに分けて説明します。 + +- [定数の作成](#定数の追加) +- [ゲームを開始するイベントリスナー](#開始ロジックの追加) +- [タイピングへのイベントリスナー](#タイピングロジックの追加) + +しかし、まず、**script.js** という名前のファイルを新規作成します。 + +### 定数の追加 + +プログラミングの生活を少しでも楽にするために、いくつかのアイテムが必要になります。繰り返しになりますが、レシピに似ていますが、必要なものは以下の通りです。 + +- すべての名言のリストを含む配列 +- 現在の名言のすべての単語を格納する空の配列 +- プレイヤーが現在入力している単語のインデックスを格納するスペース +- プレイヤーがスタートをクリックした時間 + +UI 要素への参照も欲しいところです。 + +- テキストボックス (**typed-value**) +- 名言の表示 (**quote**) +- メッセージ (**message**) + +```javascript +// script.js の中身 +// すべての名言 +const quotes = [ + 'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.', + 'There is nothing more deceptive than an obvious fact.', + 'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.', + 'I never make exceptions. An exception disproves the rule.', + 'What one man can invent another can discover.', + 'Nothing clears up a case so much as stating it to another person.', + 'Education never ends, Watson. It is a series of lessons, with the greatest for the last.', +]; +// 単語のリストと、プレイヤーが現在入力している単語のインデックスを格納します。 +let words = []; +let wordIndex = 0; +// 開始時刻 +let startTime = Date.now(); +// ページ構成要素 +const quoteElement = document.getElementById('quote'); +const messageElement = document.getElementById('message'); +const typedValueElement = document.getElementById('typed-value'); +``` + +✅ 先に行き、あなたのゲームに多くの名言を追加します。 + +> **注:** `document.getElementById`を使用することで、コード内で必要なときにいつでも要素を取得することができます。これらの要素を定期的に参照することになるので、定数を使用して文字列リテラルのタイプミスを回避します。[Vue.js](https://jp.vuejs.org/) や [React](https://ja.reactjs.org/) などのフレームワークは、コードを集中管理するのに役立ちます。 + +1分ほどかけて、`const`, `let`, `var` の使い方のビデオを見てみましょう。 + +[![Types of variables](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Types of variables") + +### 開始ロジックの追加 + +ゲームを始めるには、プレイヤーはスタートをクリックします。もちろん、プレイヤーがいつスタートボタンをクリックするかはわかりません。ここで[イベントリスナー](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener)の出番です。イベントリスナーを使うと、何か (イベント) が発生するのを待ち受けて、それに応じてコードを実行することができます。この例では、ユーザーがスタートをクリックしたときにコードを実行したいと思います。 + +ユーザーが **スタート** をクリックしたときに、名言を選択し、ユーザーインターフェースを設定し、現在の単語とタイミングのトラッキングを設定する必要があります。以下は追加する必要のある JavaScript です。スクリプトブロックの後で説明します。 + +```javascript +// script.js の最後の方に +document.getElementById('start').addEventListener('click', () => { + // 名言の取得 + const quoteIndex = Math.floor(Math.random() * quotes.length); + const quote = quotes[quoteIndex]; + // 名言を言葉の配列に入れる + words = quote.split(' '); + // トラッキング用の単語インデックスをリセットする + wordIndex = 0; + + // UI の更新 + // span 要素の配列を作成し、クラスを設定できるようにします。 + const spanWords = words.map(function(word) { return `${word} `}); + // 文字列に変換して、名言を表示する innerHTML として設定します。 + quoteElement.innerHTML = spanWords.join(''); + // 最初の単語を強調表示します。 + quoteElement.childNodes[0].className = 'highlight'; + // 前のメッセージをクリアします。 + messageElement.innerText = ''; + + // テキストボックスの設定 + // テキストボックスをクリアします。 + typedValueElement.value = ''; + // フォーカスを合わせます。 + typedValueElement.focus(); + // イベントハンドラを設定します。 + + // タイマーを開始します。 + startTime = new Date().getTime(); +}); +``` + +コードを分解してみましょう! + +- 単語のトラッキングを設定します + - [Math.floor](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) と [Math.random](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/random) を使うと、`quotes` 配列から名言をランダムに選択することができます + - `quote` を `words` の配列に変換することで、プレイヤーが現在入力している単語を追跡することができます + - `wordIndex` は 0 に設定されます。プレイヤーは最初の単語から始めます +- UI を設定します + - `spanWords` の配列を作成し、その中に `span` 要素内の各単語を格納します + - これにより、ディスプレイ上の単語を強調表示することができます + - 配列を `join` して文字列を作成し、これを用いて `quoteElement` の `innerHTML` を更新することができます + - これにより、プレイヤーに名言が表示されます + - 最初の `span` 要素の `className` を `highlight` に設定し、黄色で強調表示します + - `innerText` を `''` に設定することで `messageElement` をクリーンにします +- テキストボックスを設定します + - 現在の `typedValueElement` の `value` をクリアします + - `focus` を `typedValueElement` に設定します +- `getTime` を呼び出してタイマーを起動します + +### タイピングロジックの追加 + +プレイヤーが入力すると `input` イベントが発生します。このイベントリスナーは、プレイヤーが単語を正しく入力しているかどうかをチェックし、ゲームの現在の状態を処理します。**script.js** に戻り、最後に以下のコードを追加します。この後に分解していきます。 + +```javascript +// script.js の最後の方に +typedValueElement.addEventListener('input', () => { + // 現在の単語を取得します + const currentWord = words[wordIndex]; + // 現在の値を取得します + const typedValue = typedValueElement.value; + + if (typedValue === currentWord && wordIndex === words.length - 1) { + // 文の終了 + // 成功を表示します + const elapsedTime = new Date().getTime() - startTime; + const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`; + messageElement.innerText = message; + } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) { + // 単語の終了 + // 新しい単語用に 'typedValueElement' をクリアします + typedValueElement.value = ''; + // 次の単語に移ります + wordIndex++; + // 名言内のすべての要素のクラス名をリセットします + for (const wordElement of quoteElement.childNodes) { + wordElement.className = ''; + } + // 新しい単語を強調表示します + quoteElement.childNodes[wordIndex].className = 'highlight'; + } else if (currentWord.startsWith(typedValue)) { + // 現在正しく入力されている状態 + // 次の単語を強調表示します + typedValueElement.className = ''; + } else { + // エラー状態 + typedValueElement.className = 'error'; + } +}); +``` + +コードを分解してみましょう! まず、現在の単語とプレイヤーがこれまでに入力した値を取得します。次にウォーターフォールロジックがあり、ここでは引用が完全であるかどうか、単語が完全であるかどうか、単語が正しいかどうか、(最後に) エラーがあるかどうかをチェックします。 + +- 名言が完成しており、`typepedValue` が `currentWord` と等しく、`wordIndex` が `words` の `length` よりも 1 つ小さい値であることを示している場合 + - 現在の時刻から `startTime` を引くことで `elapsedTime` を計算します + - `elapsedTime` を 1,000 で割り、ミリ秒から秒に変換します + - 成功メッセージを表示します +- 単語は完成しており、`typedValue` がスペース (単語の終わり) で終わり、`typedValue` が `currentWord` と同じであることを示している場合 + - 次の単語が入力されるように `typedElement` の `value` を `''` に設定します + - 次の単語に移動するために `wordIndex` をインクリメントします + - `quoteElement` のすべての `childNodes` をループして `className` を `''` に設定し、デフォルトの表示に戻します + - 現在の単語の `className` を `highlight` に設定して、それを次のタイプの単語としてフラグを立てます +- 単語は現在 (完全ではないが) 正しく入力されており、`typedValue` で始まる `currentWord` で示される場合 + - `className` をクリアすることで `typedValueElement` がデフォルトで表示されるようにします +- ここまで来たら、エラーが発生しています + - `typedValueElement` の `className` を `error` に設定します + +## アプリケーションのテスト + +最後までやりましたね! 最後のステップは、私たちのアプリケーションが動作することを確認することです。試してみてください。エラーがあっても心配しないでください。**すべての開発者** がエラーに遭遇します。メッセージを調べて、必要に応じてデバッグしていきましょう。 + +**スタート** をクリックして、入力を開始してください。前に見たアニメーションに少し似ているはずです。 + +![Animation of the game in action](../../../4-typing-game/images/demo.gif) + +--- + +## 🚀 チャレンジ + +より多くの機能を追加しましょう。 + +- 完了時に `input` イベントリスナーを無効にし、ボタンがクリックされたときに再度有効にします +- プレイヤーが名言を完了したときにテキストボックスを無効にします +- 成功メッセージを含むモーダルダイアログボックスを表示します +- [localStorage](https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage) を使ってハイスコアを保存します + +## レクチャー後クイズ + +[レクチャー後クイズ](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/22) + +## 復習と自己学習 + +Web ブラウザを介して開発者が[利用できるすべてのイベント](https://developer.mozilla.org/ja/docs/Web/Events)を読んで、それぞれを使用するシナリオを検討してください。 + +## 課題 + +[新しいキーボードゲームを作成する](assignment.ja.md) diff --git a/4-typing-game/typing-game/translations/assignment.ja.md b/4-typing-game/typing-game/translations/assignment.ja.md new file mode 100644 index 00000000..9605e0ac --- /dev/null +++ b/4-typing-game/typing-game/translations/assignment.ja.md @@ -0,0 +1,12 @@ +# 新しいキーボードゲームを作成する + +## 説明書 + +キーボードのイベントを使ってタスクを行う小さなゲームを作りましょう。異なる種類のタイピングゲームや、キー入力で画面にピクセルをペイントするアートタイプのゲームにすることもできます。創造力を発揮してください。 + +## ルーブリック + +| 基準 | 模範的な例 | 適切な | 改善が必要 | +| -------- | ------------------------ | ------------------------ | ----------------- | +| | フルゲームが発表される。 | ゲームは非常にミニマム。 | ゲームにはバグがある。 | +| | \ No newline at end of file From 50dd01f0d529e1e2221eac1d1569299766632c69 Mon Sep 17 00:00:00 2001 From: Yuuki Ebihara Date: Fri, 1 Jan 2021 21:44:28 +0900 Subject: [PATCH 02/17] Fix Typo: path for gif --- 4-typing-game/translations/README.ja.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/4-typing-game/translations/README.ja.md b/4-typing-game/translations/README.ja.md index 17458bd5..89f4410a 100644 --- a/4-typing-game/translations/README.ja.md +++ b/4-typing-game/translations/README.ja.md @@ -8,7 +8,7 @@ これまで培ってきた JavaScript、HTML、CSS のスキルを使ってタイピングゲームを作っていただきます。このゲームでは、プレイヤーにランダムな引用文 ([シャーロック・ホームズ](https://en.wikipedia.org/wiki/Sherlock_Holmes)の名言を使用しています) を提示し、それを正確に入力するのにどれくらいの時間がかかるかを競います。これまでに培った JavaScript、HTML、CSS のスキルを使ってタイピングゲームを作ってみましょう。 -![demo](images/demo.gif) +![demo](../images/demo.gif) ## 前提条件 From 474b3c193dab1b2d4e15980ca4bd2bc0ba9dc0e1 Mon Sep 17 00:00:00 2001 From: hexatester Date: Fri, 1 Jan 2021 22:15:16 +0700 Subject: [PATCH 03/17] Migrate 1.1-intro-to-programming-languages id quiz --- .../.github/post-lecture-quiz.id.md | 18 - .../.github/pre-lecture-quiz.id.md | 18 - .../translations/README.id.md | 7 +- quiz-app/src/App.vue | 1 + quiz-app/src/assets/translations/id.json | 2509 +++++++++++++++++ quiz-app/src/assets/translations/index.js | 2 + 6 files changed, 2518 insertions(+), 37 deletions(-) delete mode 100644 1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/post-lecture-quiz.id.md delete mode 100644 1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/pre-lecture-quiz.id.md create mode 100644 quiz-app/src/assets/translations/id.json diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/post-lecture-quiz.id.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/post-lecture-quiz.id.md deleted file mode 100644 index 40a002b9..00000000 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/post-lecture-quiz.id.md +++ /dev/null @@ -1,18 +0,0 @@ -*Selesaikan kuis ini bersama dengan kiriman Anda dengan memeriksa satu jawaban per pertanyaan.* - -1. Bahasa apa yang kemungkinan besar akan Anda gunakan untuk membuat situs web? - -- [ ] Machine Code (Kode Mesin) -- [ ] JavaScript -- [ ] Bash - -2. Lingkungan pengembangan unik untuk setiap pengembang - -- [ ] Benar -- [ ] Salah - -3. Apa yang akan dilakukan pengembang untuk memperbaiki kode buggy (mudah rusak)? - -- [ ] Syntax highlighting (Penyorotan sintaks) -- [ ] Debugging -- [ ] Code formatting (Pemformatan kode) diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/pre-lecture-quiz.id.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/pre-lecture-quiz.id.md deleted file mode 100644 index 6846d246..00000000 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/pre-lecture-quiz.id.md +++ /dev/null @@ -1,18 +0,0 @@ -*Selesaikan kuis ini di kelas* - -1. Sebuah program dapat dibuat tanpa pembuatnya menulis kode apapun - -- [ ] Benar -- [ ] Salah - -2. Bahasa tingkat rendah adalah pilihan populer untuk: - -- [ ] Website -- [ ] Hardware -- [ ] Perangkat lunak permainan video - -3. Manakah dari alat berikut yang kemungkinan besar ada di lingkungan pengembang web? - -- [ ] Hardware, like a Raspberry Pi -- [ ] Browser DevTools -- [ ] Operating system documentation diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.id.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.id.md index 36800646..086ce446 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.id.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.id.md @@ -6,7 +6,8 @@ Pelajaran ini mencakup dasar-dasar bahasa pemrograman. Topik yang dibahas di sin > Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac) ## Kuis Pra-Kuliah -[Kuis pra-kuliah](.github/pre-lecture-quiz.id.md) + +[Kuis pra-kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/1) ## Pengantar @@ -179,6 +180,10 @@ Ketika pengembang ingin mempelajari sesuatu yang baru, mereka kemungkinan besar Bandingkan beberapa bahasa pemrograman. Apa saja ciri-ciri unik JavaScript vs. Java? Bagaimana dengan COBOL vs. Go? +## Kuis Pasca-Kuliah + +[Kuis pasca-kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/2) + ## Ulasan & Belajar Mandiri Pelajari sedikit tentang berbagai bahasa yang tersedia untuk programmer. Cobalah untuk menulis baris dalam satu bahasa, dan kemudian mengulanginya pada dua bahasa lainnya. Apa yang Anda pelajari? diff --git a/quiz-app/src/App.vue b/quiz-app/src/App.vue index 99a48cd1..4bbb1cc0 100644 --- a/quiz-app/src/App.vue +++ b/quiz-app/src/App.vue @@ -6,6 +6,7 @@
diff --git a/quiz-app/src/assets/translations/id.json b/quiz-app/src/assets/translations/id.json new file mode 100644 index 00000000..17f21c5d --- /dev/null +++ b/quiz-app/src/assets/translations/id.json @@ -0,0 +1,2509 @@ +[ + { + "title": "Pengembangan Web untuk Pemula: Kuis", + "complete": "Selamat, Anda telah menyelesaikan kuisnya!", + "error": "Maaf coba lagi", + "quizzes": [ + { + "id": 1, + "title": "Pelajaran 1 - Pengantar Bahasa Pemrograman: Kuis Pra-Kuliah", + "quiz": [ + { + "questionText": "Sebuah program dapat dibuat tanpa pembuatnya menulis kode apapun", + "answerOptions": [ + { + "answerText": "Benar", + "isCorrect": "true" + }, + { + "answerText": "Salah", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Bahasa tingkat rendah adalah pilihan populer untuk", + "answerOptions": [ + { + "answerText": "Website", + "isCorrect": "false" + }, + { + "answerText": "Hardware", + "isCorrect": "true" + }, + { + "answerText": "Perangkat lunak permainan video", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Manakah dari alat berikut yang kemungkinan besar ada di lingkungan pengembang web?", + "answerOptions": [ + { + "answerText": "Hardware, like a Raspberry Pi", + "isCorrect": "false" + }, + { + "answerText": "Browser DevTools", + "isCorrect": "true" + }, + { + "answerText": "Operating system documentation", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 2, + "title": "Pelajaran 1 - Pengantar Bahasa Pemrograman: Kuis Pasca-Kuliah", + "quiz": [ + { + "questionText": "Bahasa apa yang kemungkinan besar akan Anda gunakan untuk membuat situs web?", + "answerOptions": [ + { + "answerText": "Machine Code (Kode Mesin)", + "isCorrect": "false" + }, + { + "answerText": "JavaScript", + "isCorrect": "true" + }, + { + "answerText": "Bash", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Lingkungan pengembangan unik untuk setiap pengembang", + "answerOptions": [ + { + "answerText": "Benar", + "isCorrect": "true" + }, + { + "answerText": "Salah", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Apa yang akan dilakukan pengembang untuk memperbaiki kode buggy (mudah rusak)?", + "answerOptions": [ + { + "answerText": "Syntax highlighting (Penyorotan sintaks)", + "isCorrect": "false" + }, + { + "answerText": "Debugging", + "isCorrect": "true" + }, + { + "answerText": "Code formatting (Pemformatan kode)", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 3, + "title": "Lesson 2 - Introduction to GitHub: Pre-Lecture Quiz", + "quiz": [ + { + "questionText": "How do you create a Git repo?", + "answerOptions": [ + { + "answerText": "git create", + "isCorrect": "false" + }, + { + "answerText": "git start", + "isCorrect": "false" + }, + { + "answerText": "git init", + "isCorrect": "true" + } + ] + }, + { + "questionText": "What does git add do?", + "answerOptions": [ + { + "answerText": "Commits your code", + "isCorrect": "false" + }, + { + "answerText": "Adds your files to a staging area for tracking", + "isCorrect": "true" + }, + { + "answerText": "Adds your files to GitHub", + "isCorrect": "false" + } + ] + }, + { + "questionText": "How do you check if git is installed on your computer?", + "answerOptions": [ + { + "answerText": "type git --version", + "isCorrect": "true" + }, + { + "answerText": "type git --installed", + "isCorrect": "false" + }, + { + "answerText": "type git --init", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 4, + "title": "Lesson 2 - Introduction to GitHub: Post-Lecture Quiz", + "quiz": [ + { + "questionText": "A place to compare and discuss the differences introduced on a branch with reviews, comments, integrated tests, and more is:", + "answerOptions": [ + { + "answerText": "GitHub", + "isCorrect": "false" + }, + { + "answerText": "A Pull Request", + "isCorrect": "true" + }, + { + "answerText": "A feature branch", + "isCorrect": "false" + } + ] + }, + { + "questionText": "How would you get all the commits from a remote branch?", + "answerOptions": [ + { + "answerText": "git fetch", + "isCorrect": "false" + }, + { + "answerText": "git pull", + "isCorrect": "true" + }, + { + "answerText": "git commits -r", + "isCorrect": "false" + } + ] + }, + { + "questionText": "How do you switch to a branch?", + "answerOptions": [ + { + "answerText": "git switch [branch-name]", + "isCorrect": "false" + }, + { + "answerText": "git checkout [branch-name]", + "isCorrect": "true" + }, + { + "answerText": "git load [branch-name]", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 5, + "title": "Lesson 3 - Creating Accessible Webpages: Pre-Lecture Quiz", + "quiz": [ + { + "questionText": "An accessible web site can be checked in which browser tool", + "answerOptions": [ + { + "answerText": "Lighthouse", + "isCorrect": "true" + }, + { + "answerText": "Deckhouse", + "isCorrect": "false" + }, + { + "answerText": "Cleanhouse", + "isCorrect": "true" + } + ] + }, + { + "questionText": "You need a physical screen reader to test accessibility for visually-impaired users", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "false" + }, + { + "answerText": "false", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Accessibility is only important on government web sites", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "false" + }, + { + "answerText": "false", + "isCorrect": "true" + } + ] + } + ] + }, + { + "id": 6, + "title": "Lesson 3 - Creating Accessible Webpages: Post-Lecture Quiz", + "quiz": [ + { + "questionText": "Lighthouse only checks for accessibility problems", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "false" + }, + { + "answerText": "false", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Color-safe palettes help people with", + "answerOptions": [ + { + "answerText": "color-blindness", + "isCorrect": "false" + }, + { + "answerText": "visual impairments", + "isCorrect": "false" + }, + { + "answerText": "both the above", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Descriptive links are vital for accessible web sites", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "true" + }, + { + "answerText": "false", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 7, + "title": "Lesson 4 - JavaScript Basics - Data Types: Pre-Lecture Quiz", + "quiz": [ + { + "questionText": "Booleans are a data type you can use to test the length of a string", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "false" + }, + { + "answerText": "false", + "isCorrect": "true" + } + ] + }, + { + "questionText": "The following is an operation you can perform on a string", + "answerOptions": [ + { + "answerText": "concatenation", + "isCorrect": "true" + }, + { + "answerText": "appending", + "isCorrect": "false" + }, + { + "answerText": "splicing", + "isCorrect": "false" + } + ] + }, + { + "questionText": "== and === are interchangeable", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "false" + }, + { + "answerText": "false", + "isCorrect": "true" + } + ] + } + ] + }, + { + "id": 8, + "title": "Lesson 4 - JavaScript Basics - Data Types: Post-Lecture Quiz", + "quiz": [ + { + "questionText": "Constants are the same as let and var to declare variables except", + "answerOptions": [ + { + "answerText": "Constants must be initialized", + "isCorrect": "true" + }, + { + "answerText": "Constants can be altered", + "isCorrect": "false" + }, + { + "answerText": "Constants can be reassigned", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Numbers and ____ are JavaScript primitives that handle numeric data", + "answerOptions": [ + { + "answerText": "bigint", + "isCorrect": "true" + }, + { + "answerText": "boolean", + "isCorrect": "false" + }, + { + "answerText": "star", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Strings can reside between both single and double quotes", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "true" + }, + { + "answerText": "false", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 9, + "title": "Lesson 5 - JavaScript Basics - Methods and Functions: Pre-Lecture Quiz", + "quiz": [ + { + "questionText": "What's an argument?", + "answerOptions": [ + { + "answerText": "It's something you declare in the function definition", + "isCorrect": "false" + }, + { + "answerText": "It's something you pass into a function at invocation time", + "isCorrect": "true" + }, + { + "answerText": "It's something you have with people you know", + "isCorrect": "false" + } + ] + }, + { + "questionText": "A function must return something", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "false" + }, + { + "answerText": "false", + "isCorrect": "true" + } + ] + }, + { + "questionText": "You can name a function anything", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "false" + }, + { + "answerText": "false", + "isCorrect": "false" + }, + { + "answerText": "true, but it should be a descriptive name", + "isCorrect": "true" + } + ] + } + ] + }, + { + "id": 10, + "title": "Lesson 5 - JavaScript Basics - Methods and Functions: Post-Lecture Quiz", + "quiz": [ + { + "questionText": "Arguments must be provided for all parameters in a function", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "false" + }, + { + "answerText": "false", + "isCorrect": "true" + } + ] + }, + { + "questionText": "What does a default value do?", + "answerOptions": [ + { + "answerText": "Sets a correct value", + "isCorrect": "false" + }, + { + "answerText": "Gives a starter value for a parameter so your code still behaves if you omit an argument for it", + "isCorrect": "true" + }, + { + "answerText": "Has no utility", + "isCorrect": "false" + } + ] + }, + { + "questionText": "A fat arrow function allows you to", + "answerOptions": [ + { + "answerText": "Create heavy functions", + "isCorrect": "false" + }, + { + "answerText": "Omit the function keyword", + "isCorrect": "true" + }, + { + "answerText": "Create an anonymous function", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 11, + "title": "Lesson 6 - JavaScript Basics - Making Decisions: Pre-Lecture Quiz", + "quiz": [ + { + "questionText": "The following operator == is called", + "answerOptions": [ + { + "answerText": "Equality", + "isCorrect": "true" + }, + { + "answerText": "Strict equality", + "isCorrect": "false" + }, + { + "answerText": "Assignment", + "isCorrect": "false" + } + ] + }, + { + "questionText": "A comparison in JavaScript returns what type?", + "answerOptions": [ + { + "answerText": "boolean", + "isCorrect": "true" + }, + { + "answerText": "null", + "isCorrect": "false" + }, + { + "answerText": "string", + "isCorrect": "false" + } + ] + }, + { + "questionText": "The ! symbol in JavaScript means:", + "answerOptions": [ + { + "answerText": "Logical Not", + "isCorrect": "true" + }, + { + "answerText": "Important", + "isCorrect": "false" + }, + { + "answerText": "Equals", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 12, + "title": "Lesson 6 - JavaScript Basics - Making Decisions: Post-Lecture Quiz", + "quiz": [ + { + "questionText": "What would the following code return: '1' == 1", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "true" + }, + { + "answerText": "false", + "isCorrect": "false" + }, + { + "answerText": "null", + "isCorrect": "false" + } + ] + }, + { + "questionText": "What would the following code return: '1' === 1", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "false" + }, + { + "answerText": "false", + "isCorrect": "true" + }, + { + "answerText": "null", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Choose the correct operator to express 'or' logic", + "answerOptions": [ + { + "answerText": "a | b", + "isCorrect": "false" + }, + { + "answerText": "a || b", + "isCorrect": "true" + }, + { + "answerText": "a or b", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 13, + "title": "Lesson 7 - JavaScript Basics - Arrays and Loops: Pre-Lecture Quiz", + "quiz": [ + { + "questionText": "To refer to a specific item in an array, you would use a", + "answerOptions": [ + { + "answerText": "square bracket []", + "isCorrect": "false" + }, + { + "answerText": "index", + "isCorrect": "true" + }, + { + "answerText": "curly braces {}", + "isCorrect": "false" + } + ] + }, + { + "questionText": "How do you get the number of items in an array?", + "answerOptions": [ + { + "answerText": "The 'len(array)' method", + "isCorrect": "false" + }, + { + "answerText": "The property size on the array", + "isCorrect": "false" + }, + { + "answerText": "The length property on the array", + "isCorrect": "true" + } + ] + }, + { + "questionText": "In JavaScript, indexes start at", + "answerOptions": [ + { + "answerText": "0", + "isCorrect": "true" + }, + { + "answerText": "1", + "isCorrect": "false" + }, + { + "answerText": "2", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 14, + "title": "Lesson 7 - JavaScript Basics - Arrays and Loops: Post-Lecture Quiz", + "quiz": [ + { + "questionText": "What part of a for-loop would you need to modify to increment its iteration by 5?", + "answerOptions": [ + { + "answerText": "condition", + "isCorrect": "true" + }, + { + "answerText": "counter", + "isCorrect": "false" + }, + { + "answerText": "iteration-expression", + "isCorrect": "false" + } + ] + }, + { + "questionText": "What's the difference between a while and a for-loop", + "answerOptions": [ + { + "answerText": "A for-loop has a counter and iteration-expression, where while only has a condition", + "isCorrect": "true" + }, + { + "answerText": "A while has a counter and iteration-expression where for-loop only has a condition", + "isCorrect": "false" + }, + { + "answerText": "They are the same, just an alias for one another", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Given the code for (let i=1; i < 5; i++), how many iterations will it perform?", + "answerOptions": [ + { + "answerText": "5", + "isCorrect": "false" + }, + { + "answerText": "4", + "isCorrect": "true" + } + ] + } + ] + }, + { + "id": 15, + "title": "Lesson 8 - Terrarium Project - Introduction to HTML: Pre-Lecture Quiz", + "quiz": [ + { + "questionText": "HTML stands for 'HyperText Mockup Language'", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "false" + }, + { + "answerText": "false", + "isCorrect": "true" + } + ] + }, + { + "questionText": "All HTML tags need both opening and closing tags", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "false" + }, + { + "answerText": "false", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Using semantic markup is most important for", + "answerOptions": [ + { + "answerText": "code readability", + "isCorrect": "false" + }, + { + "answerText": "screen readers", + "isCorrect": "true" + }, + { + "answerText": "maintenance", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 16, + "title": "Lesson 8 - Terrarium Project - Introduction to HTML: Post-Lecture Quiz", + "quiz": [ + { + "questionText": "Spans and Divs are interchangeable", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "false" + }, + { + "answerText": "false", + "isCorrect": "true" + } + ] + }, + { + "questionText": "The head of an HTML doc can contain:", + "answerOptions": [ + { + "answerText": "the title tag", + "isCorrect": "false" + }, + { + "answerText": "metadata", + "isCorrect": "false" + }, + { + "answerText": "all the above", + "isCorrect": "true" + } + ] + }, + { + "questionText": "You can't use deprecated tags in your markup", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "false" + }, + { + "answerText": "false", + "isCorrect": "false" + }, + { + "answerText": "false, but they have been deprecated for good reason", + "isCorrect": "true" + } + ] + } + ] + }, + { + "id": 17, + "title": "Lesson 9 - Terrarium Project - Introduction to CSS: Pre-Lecture Quiz", + "quiz": [ + { + "questionText": "HTML elements must have either a class or an id in order to be styled", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "false" + }, + { + "answerText": "false", + "isCorrect": "true" + } + ] + }, + { + "questionText": "CSS stands for 'Complete Style Sheets'", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "false" + }, + { + "answerText": "false", + "isCorrect": "true" + } + ] + }, + { + "questionText": "CSS can be used to create animations", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "true" + }, + { + "answerText": "false", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 18, + "title": "Lesson 9 - Terrarium Project - Introduction to CSS: Post-Lecture Quiz", + "quiz": [ + { + "questionText": "You can write CSS directly in the head section of your HTML file", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "true" + }, + { + "answerText": "false", + "isCorrect": "false" + } + ] + }, + { + "questionText": "It's always necessary to include CSS in your app", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "false" + }, + { + "answerText": "false", + "isCorrect": "false" + }, + { + "answerText": "false, but if you want it to look good you probably need CSS", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Which browser tool can be used to inspect CSS?", + "answerOptions": [ + { + "answerText": "Elements", + "isCorrect": "false" + }, + { + "answerText": "Styles", + "isCorrect": "true" + }, + { + "answerText": "Network", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 19, + "title": "Lesson 10 - Terrarium Project - DOM Manipulation and a Closure: Pre-Lecture Quiz", + "quiz": [ + { + "questionText": "The DOM stands for 'Document Object Management'", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "false" + }, + { + "answerText": "false", + "isCorrect": "true" + } + ] + }, + { + "questionText": "The DOM can be thought of as a tree", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "true" + }, + { + "answerText": "false", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Using the Web API, you can manipulate the DOM", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "true" + }, + { + "answerText": "false", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 20, + "title": "Lesson 10 - Terrarium Project - DOM Manipulation and a Closure: Post-Lecture Quiz", + "quiz": [ + { + "questionText": "The DOM is a model to represent a document on the web", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "true" + }, + { + "answerText": "false", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Use JavaScript closures to perform the following:", + "answerOptions": [ + { + "answerText": "write functions within functions", + "isCorrect": "true" + }, + { + "answerText": "enclose the DOM", + "isCorrect": "false" + }, + { + "answerText": "close script blocks", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Fill in the blank: Closures are useful when one or more functions need to access an outer function's...", + "answerOptions": [ + { + "answerText": "arrays", + "isCorrect": "false" + }, + { + "answerText": "scope", + "isCorrect": "true" + }, + { + "answerText": "functions", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 21, + "title": "Lesson 11 - Typing Game: Pre-Lecture Quiz", + "quiz": [ + { + "questionText": "Event-driven programming is when a user", + "answerOptions": [ + { + "answerText": "clicks on a button", + "isCorrect": "false" + }, + { + "answerText": "changes a value", + "isCorrect": "false" + }, + { + "answerText": "interacts with the page", + "isCorrect": "false" + }, + { + "answerText": "any of the above", + "isCorrect": "true" + } + ] + }, + { + "questionText": "In procedural programming, functions are called", + "answerOptions": [ + { + "answerText": "any time", + "isCorrect": "false" + }, + { + "answerText": "in a specific order", + "isCorrect": "true" + }, + { + "answerText": "left to right", + "isCorrect": "false" + } + ] + }, + { + "questionText": "The universal method exposed in the DOM for registering event handlers is called", + "answerOptions": [ + { + "answerText": "addEventListener", + "isCorrect": "true" + }, + { + "answerText": "addListener", + "isCorrect": "false" + }, + { + "answerText": "addEvent", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 22, + "title": "Lesson 11 - Typing Game: Post-Lecture Quiz", + "quiz": [ + { + "questionText": "Just about anything a user does on a page raises an event", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "true" + }, + { + "answerText": "false", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Common events include", + "answerOptions": [ + { + "answerText": "click_event", + "isCorrect": "false" + }, + { + "answerText": "select_event", + "isCorrect": "false" + }, + { + "answerText": "input_event", + "isCorrect": "false" + }, + { + "answerText": "all of these", + "isCorrect": "true" + } + ] + }, + { + "questionText": "You can use anonymous functions to create event handlers", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "true" + }, + { + "answerText": "false", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 23, + "title": "Lesson 12 - Browser Extension Project - All about Browsers: Pre-Lecture Quiz", + "quiz": [ + { + "questionText": "You can get browser extensions from", + "answerOptions": [ + { + "answerText": "WalMart", + "isCorrect": "false" + }, + { + "answerText": "The browser's extension store", + "isCorrect": "true" + }, + { + "answerText": "The App store", + "isCorrect": "false" + } + ] + }, + { + "questionText": "NPM stands for", + "answerOptions": [ + { + "answerText": "Node Package Manager", + "isCorrect": "true" + }, + { + "answerText": "Netscape Primary Mix", + "isCorrect": "false" + }, + { + "answerText": "Natural Processing Manager", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Your browser can serve web pages both securely and insecurely", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "true" + }, + { + "answerText": "false", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 24, + "title": "Lesson 12 - Browser Extension Project - All about Browsers: Post-Lecture Quiz", + "quiz": [ + { + "questionText": "The World Wide Web was invented by", + "answerOptions": [ + { + "answerText": "Tom Barnard-Loft", + "isCorrect": "false" + }, + { + "answerText": "Tim Berners-Lee", + "isCorrect": "true" + }, + { + "answerText": "Trish Berth-Pool", + "isCorrect": "false" + } + ] + }, + { + "questionText": "The first browser was called", + "answerOptions": [ + { + "answerText": "WorldWideWeb", + "isCorrect": "true" + }, + { + "answerText": "Mozilla", + "isCorrect": "false" + }, + { + "answerText": "Netscape", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Browsers can store a user's browsing history", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "true" + }, + { + "answerText": "false", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 25, + "title": "Lesson 13 - Browser Extension Project - Call an API, use Local Storage: Pre-Lecture Quiz", + "quiz": [ + { + "questionText": "APIs stand for", + "answerOptions": [ + { + "answerText": "Application Programming Interfaces", + "isCorrect": "true" + }, + { + "answerText": "A Programming Inference", + "isCorrect": "false" + }, + { + "answerText": "Anti Proven Intentions", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Use an API to interact with", + "answerOptions": [ + { + "answerText": "Another web-connected asset", + "isCorrect": "false" + }, + { + "answerText": "A database", + "isCorrect": "false" + }, + { + "answerText": "Either of the above", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Anyone can create an API", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "true" + }, + { + "answerText": "false", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 26, + "title": "Lesson 13 - Browser Extension Project - Call an API, use Local Storage: Post-Lecture Quiz", + "quiz": [ + { + "questionText": "LocalStorage is cleared every time you close the browser window", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "false" + }, + { + "answerText": "false", + "isCorrect": "true" + } + ] + }, + { + "questionText": "The main browser window controls a browser's extension's LocalStorage", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "true" + }, + { + "answerText": "false", + "isCorrect": "false" + } + ] + }, + { + "questionText": "REST in an API context stands for", + "answerOptions": [ + { + "answerText": "Representational State Transfer", + "isCorrect": "true" + }, + { + "answerText": "Returning State Tasks", + "isCorrect": "false" + }, + { + "answerText": "Rendering State To Browser", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 27, + "title": "Lesson 14 - Browser Extension Project - Learn about Background Tasks and Performance: Pre-Lecture Quiz", + "quiz": [ + { + "questionText": "Test the performance of your app", + "answerOptions": [ + { + "answerText": "Using the browser's tools", + "isCorrect": "true" + }, + { + "answerText": "Using a separate software package", + "isCorrect": "false" + }, + { + "answerText": "Manually", + "isCorrect": "false" + } + ] + }, + { + "questionText": "The 'performance' of a web site is an analysis of", + "answerOptions": [ + { + "answerText": "How fast it loads", + "isCorrect": "false" + }, + { + "answerText": "How fast the code on it runs", + "isCorrect": "false" + }, + { + "answerText": "Both of the above", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Overall, the 'weight' of web pages over the past few years has", + "answerOptions": [ + { + "answerText": "gotten lighter", + "isCorrect": "false" + }, + { + "answerText": "gotten heavier", + "isCorrect": "true" + }, + { + "answerText": "stayed the same", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 28, + "title": "Lesson 14 - Browser Extension Project - Learn about Background Tasks and Performance: Post-Lecture Quiz", + "quiz": [ + { + "questionText": "To get a better view of your site's performance, clear its cache and reload in the profiler", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "true" + }, + { + "answerText": "false", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Browser extensions are inherently performant", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "false" + }, + { + "answerText": "false", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Analyze the following for performance bottlenecks", + "answerOptions": [ + { + "answerText": "DOM traversals", + "isCorrect": "false" + }, + { + "answerText": "JavaScript optimizations", + "isCorrect": "false" + }, + { + "answerText": "Asset management", + "isCorrect": "false" + }, + { + "answerText": "All the above", + "isCorrect": "true" + } + ] + } + ] + }, + { + "id": 29, + "title": "Lesson 15 - Space Game - Introduction: Pre-Lecture Quiz", + "quiz": [ + { + "questionText": "JavaScript is an unpopular language for building games", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "false" + }, + { + "answerText": "false", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Pub/Sub is a preferred pattern for managing the game's assets and flow", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "true" + }, + { + "answerText": "false", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Object inheritance can be handled by either using classes or composition", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "true" + }, + { + "answerText": "false", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 30, + "title": "Lesson 15 - Space Game - Introduction: Post-Lecture Quiz", + "quiz": [ + { + "questionText": "Classes rely on inheritance to ascribe to behaviors", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "true" + }, + { + "answerText": "false", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Composition is the preferred design pattern for game objects", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "false" + }, + { + "answerText": "false", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Pub/Sub stands for:", + "answerOptions": [ + { + "answerText": "Publish/Subscribe", + "isCorrect": "true" + }, + { + "answerText": "Print/Staple", + "isCorrect": "false" + }, + { + "answerText": "Publish/Sanitize", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 31, + "title": "Lesson 16 - Space Game - Draw Hero and Monsters to Canvas: Pre-Lecture Quiz", + "quiz": [ + { + "questionText": "The Canvas element is what you use to draw on a screen", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "true" + }, + { + "answerText": "false", + "isCorrect": "false" + } + ] + }, + { + "questionText": "You can only draw simple geometric shapes using the Canvas API", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "false" + }, + { + "answerText": "false", + "isCorrect": "true" + } + ] + }, + { + "questionText": "The point 0,0 is in the bottom left", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "false" + }, + { + "answerText": "false", + "isCorrect": "true" + } + ] + } + ] + }, + { + "id": 32, + "title": "Lesson 16 - Space Game - Draw Hero and Monsters to Canvas: Post-Lecture Quiz", + "quiz": [ + { + "questionText": "You can perform drawing operations directly on the Canvas", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "false" + }, + { + "answerText": "false", + "isCorrect": "true" + } + ] + }, + { + "questionText": "You listen to the onload event to know when an image has loaded asynchronously", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "true" + }, + { + "answerText": "false", + "isCorrect": "false" + } + ] + }, + { + "questionText": "You draw images onto a screen with an operation called:", + "answerOptions": [ + { + "answerText": "paintImage()", + "isCorrect": "false" + }, + { + "answerText": "drawImage()", + "isCorrect": "true" + }, + { + "answerText": "draw()", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 33, + "title": "Lesson 17 - Space Game - Adding Motion: Pre-Lecture Quiz", + "quiz": [ + { + "questionText": "Any object on the screen can receive keyboard events", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "true" + }, + { + "answerText": "false", + "isCorrect": "false" + } + ] + }, + { + "questionText": "You can use the same method to listen to key events and mouse events", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "false" + }, + { + "answerText": "false", + "isCorrect": "false" + } + ] + }, + { + "questionText": "To make things happen at a regular interval, you use what function?", + "answerOptions": [ + { + "answerText": "setInterval()", + "isCorrect": "true" + }, + { + "answerText": "setTimeout()", + "isCorrect": "false" + }, + { + "answerText": "sleep()", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 34, + "title": "Lesson 17 - Space Game - Adding Motion: Post-Lecture Quiz", + "quiz": [ + { + "questionText": "You always need to redraw the screen", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "false" + }, + { + "answerText": "false", + "isCorrect": "true" + } + ] + }, + { + "questionText": "What is a game loop?", + "answerOptions": [ + { + "answerText": "A function that ensures the game can be restarted", + "isCorrect": "false" + }, + { + "answerText": "A function that decided how fast the game should run", + "isCorrect": "false" + }, + { + "answerText": "A function that is invoked at regular intervals and draws what the user should see", + "isCorrect": "true" + } + ] + }, + { + "questionText": "A good case for redrawing the screen is", + "answerOptions": [ + { + "answerText": "A user interaction happened", + "isCorrect": "false" + }, + { + "answerText": "Something has moved", + "isCorrect": "true" + }, + { + "answerText": "Time has passed", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 35, + "title": "Lesson 18 - Space Game - Adding A Laser and Detecting Collisions: Pre-Lecture Quiz", + "quiz": [ + { + "questionText": "Collision detection is how we detect if two things have collided", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "true" + }, + { + "answerText": "false", + "isCorrect": "false" + } + ] + }, + { + "questionText": "How can we remove an item from the screen?", + "answerOptions": [ + { + "answerText": "Call the garbage collector", + "isCorrect": "false" + }, + { + "answerText": "Mark it as dead, only paint not dead objects next time we draw the screen", + "isCorrect": "true" + }, + { + "answerText": "Place the item on a negative coordinate", + "isCorrect": "false" + } + ] + }, + { + "questionText": "A good way to simulate firing a laser in JavaScript is:", + "answerOptions": [ + { + "answerText": "make a visual element respond to a key event", + "isCorrect": "true" + }, + { + "answerText": "create animated gifs", + "isCorrect": "false" + }, + { + "answerText": "make enemies blow up at intervals", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 36, + "title": "Lesson 18 - Space Game - Adding A Laser and Detecting Collisions: Post-Lecture Quiz", + "quiz": [ + { + "questionText": "In collision detection you compare two", + "answerOptions": [ + { + "answerText": "circles and whether they intersect", + "isCorrect": "false" + }, + { + "answerText": "rectangles and whether they intersect", + "isCorrect": "true" + }, + { + "answerText": "distances between two points", + "isCorrect": "false" + } + ] + }, + { + "questionText": "The reason for implementing a cooldown effect is because", + "answerOptions": [ + { + "answerText": "Making the game harder as you can't repeatedly fire a laser to destroy enemies", + "isCorrect": "false" + }, + { + "answerText": "JavaScript can only produce a certain number of events per time unit, so you need to limit them", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Constants are identifiable in code because", + "answerOptions": [ + { + "answerText": "they are written in capital letters", + "isCorrect": "true" + }, + { + "answerText": "they have specific names", + "isCorrect": "false" + }, + { + "answerText": "they are written in kebab-case like-this", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 37, + "title": "Lesson 19 - Space Game - Scoring and Lives: Pre-Lecture Quiz", + "quiz": [ + { + "questionText": "How do you draw text on a screen using the Canvas element?", + "answerOptions": [ + { + "answerText": "Place text inside a div or span element", + "isCorrect": "false" + }, + { + "answerText": "Call drawText() on the Canvas element", + "isCorrect": "false" + }, + { + "answerText": "Call fillText() on the context object", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Why do you have the concept of 'lives' in a game?", + "answerOptions": [ + { + "answerText": "To show how much damage you can take", + "isCorrect": "false" + }, + { + "answerText": "So that the game doesn't end straight away, but you have n number of chances before the game is over", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Add color to text on Canvas using", + "answerOptions": [ + { + "answerText": "fillColor", + "isCorrect": "false" + }, + { + "answerText": "fillStyle", + "isCorrect": "true" + }, + { + "answerText": "textAlign", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 38, + "title": "Lesson 19 - Space Game - Scoring and Lives: Post-Lecture Quiz", + "quiz": [ + { + "questionText": "What's a fun way to show how many lives a player has left?", + "answerOptions": [ + { + "answerText": "a number of ships", + "isCorrect": "false" + }, + { + "answerText": "a points system", + "isCorrect": "true" + } + ] + }, + { + "questionText": "How do you center text in the middle of the screen using the Canvas element?", + "answerOptions": [ + { + "answerText": "You use Flexbox", + "isCorrect": "false" + }, + { + "answerText": "You instruct the text to be drawn at the x coordinate of the client window width/2", + "isCorrect": "true" + }, + { + "answerText": "You set the textAlign property to the value center on the context object", + "isCorrect": "false" + } + ] + }, + { + "questionText": "In code, deduct a life like this:", + "answerOptions": [ + { + "answerText": "this.life-", + "isCorrect": "false" + }, + { + "answerText": "this.life--", + "isCorrect": "true" + }, + { + "answerText": "this.life++", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 39, + "title": "Lesson 20 - Space Game - End and Restart: Pre-Lecture Quiz", + "quiz": [ + { + "questionText": "When is a good time to restart a game", + "answerOptions": [ + { + "answerText": "when a player wins or loses", + "isCorrect": "true" + }, + { + "answerText": "whenever", + "isCorrect": "false" + } + ] + }, + { + "questionText": "When should a game end", + "answerOptions": [ + { + "answerText": "when an enemy ship is destroyed", + "isCorrect": "false" + }, + { + "answerText": "when a hero ship is destroyed", + "isCorrect": "true" + }, + { + "answerText": "when points are collected", + "isCorrect": "false" + } + ] + }, + { + "questionText": "A good way to add a level to your game is:", + "answerOptions": [ + { + "answerText": "Increment the amount of points necessary to complete a given level", + "isCorrect": "true" + }, + { + "answerText": "Add more players to the game", + "isCorrect": "false" + }, + { + "answerText": "Add more graphics to the game", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 40, + "title": "Lesson 20 - Space Game - End and Restart: Post-Lecture Quiz", + "quiz": [ + { + "questionText": "What is a good pattern to use when a game end condition has been met?", + "answerOptions": [ + { + "answerText": "Display a suitable message", + "isCorrect": "false" + }, + { + "answerText": "Quit the game", + "isCorrect": "false" + }, + { + "answerText": "Display a suitable message, offer the player to restart, and display what key to hit for that action", + "isCorrect": "true" + } + ] + }, + { + "questionText": "You should offer a restart only when the game has ended", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "false" + }, + { + "answerText": "false", + "isCorrect": "true" + } + ] + }, + { + "questionText": "A good way to clear the EventEmitter when ending a game is:", + "answerOptions": [ + { + "answerText": "clearing listeners", + "isCorrect": "true" + }, + { + "answerText": "clearing the screen", + "isCorrect": "false" + }, + { + "answerText": "closing the game window", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 41, + "title": "Lesson 21 - Bank Project - HTML Templates and Routes in a Web App: Pre-Lecture Quiz", + "quiz": [ + { + "questionText": "You need to create multiple HTML files to display different screens in a web app", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "false" + }, + { + "answerText": "false", + "isCorrect": "true" + } + ] + }, + { + "questionText": "You can store and persist data locally in a web app", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "true" + }, + { + "answerText": "false", + "isCorrect": "false" + } + ] + }, + { + "questionText": "What's the best data provider for a web app?", + "answerOptions": [ + { + "answerText": "A local database", + "isCorrect": "false" + }, + { + "answerText": "A JavaScript object", + "isCorrect": "false" + }, + { + "answerText": "A server with a JSON API", + "isCorrect": "true" + } + ] + } + ] + }, + { + "id": 42, + "title": "Lesson 21 - Bank Project HTML Templates and Routes in a Web App: Post-Lecture Quiz", + "quiz": [ + { + "questionText": "HTML templates are part of the DOM by default", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "false" + }, + { + "answerText": "false", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Which part of the URL is needed for routing?", + "answerOptions": [ + { + "answerText": "window.location.pathname", + "isCorrect": "false" + }, + { + "answerText": "window.location.origin", + "isCorrect": "false" + }, + { + "answerText": "both", + "isCorrect": "true" + } + ] + }, + { + "questionText": "What's the name of the event triggered when calling the history.pushState() function?", + "answerOptions": [ + { + "answerText": "pushstate", + "isCorrect": "false" + }, + { + "answerText": "popstate", + "isCorrect": "true" + }, + { + "answerText": "navigate", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 43, + "title": "Lesson 22 - Bank Project - Build a Login and Registration Form: Pre-Lecture Quiz", + "quiz": [ + { + "questionText": "HTML forms allow to send user input to a server without using JavaScript", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "true" + }, + { + "answerText": "false", + "isCorrect": "false" + } + ] + }, + { + "questionText": "