From 1843ed7359bae8f36fd0a2c9739a668305940ea4 Mon Sep 17 00:00:00 2001
From: Yangshun <tay.yang.shun@gmail.com>
Date: Thu, 13 Apr 2023 10:12:54 +0800
Subject: [PATCH] qns(quiz): update based on user feedback

---
 .../en-US.mdx                                 | 13 ++-
 .../en-US.mdx                                 | 79 ++++++-------------
 .../en-US.mdx                                 |  4 +-
 .../en-US.mdx                                 |  4 +
 4 files changed, 40 insertions(+), 60 deletions(-)

diff --git a/packages/quiz/describe-the-difference-between-script-async-and-script-defer/en-US.mdx b/packages/quiz/describe-the-difference-between-script-async-and-script-defer/en-US.mdx
index 736f431b3..7a3bec673 100644
--- a/packages/quiz/describe-the-difference-between-script-async-and-script-defer/en-US.mdx
+++ b/packages/quiz/describe-the-difference-between-script-async-and-script-defer/en-US.mdx
@@ -14,12 +14,17 @@ In `<script async>`, the script will be fetched in parallel to HTML parsing and
 
 ## `<script defer>`
 
-In `<script defer>`, the script will be fetched in parallel to HTML parsing and executed when the documented has been fully parsed. If there are multiple of them, each deferred script is executed in the order they appeared in the HTML document.
+In `<script defer>`, the script will be fetched in parallel to HTML parsing and executed when the document has been fully parsed, but before firing `DOMContentLoaded`. If there are multiple of them, each deferred script is executed in the order they appeared in the HTML document.
 
-If a script relies on a fully-parsed DOM, the `defer` attribute will be useful in ensuring that the HTML is fully parsed before executing. A deferred script must not contain `document.write()`.
+If a script relies on a fully-parsed DOM, the `defer` attribute will be useful in ensuring that the HTML is fully parsed before executing.
 
 ## Notes
 
-Generally, the `async` attribute should be used for scripts that are not critical to the initial rendering of the page and do not depend on each other, while the `defer` attribute should be used for scripts that are critical to the initial rendering of the page or that depend on each other.
+- Generally, the `async` attribute should be used for scripts that are not critical to the initial rendering of the page and do not depend on each other, while the `defer` attribute should be used for scripts that depend on / is depended on by another script.
+- The `async` and `defer` attributes are ignored for scripts that have no `src` attribute.
+- `<script>`s with `defer` or `async` that contain `document.write()` will be ignored with a message like "A call to document.write() from an asynchronously-loaded external script was ignored".
 
-The `async` and `defer` attributes are ignored for scripts that have no `src` attribute.
+## References
+
+- [`<script>`: The Script element | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#defer)
+- [async vs defer attributes](https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html)
diff --git a/packages/quiz/explain-how-prototypal-inheritance-works/en-US.mdx b/packages/quiz/explain-how-prototypal-inheritance-works/en-US.mdx
index 29b4a7a4c..615a7ce6f 100644
--- a/packages/quiz/explain-how-prototypal-inheritance-works/en-US.mdx
+++ b/packages/quiz/explain-how-prototypal-inheritance-works/en-US.mdx
@@ -7,71 +7,42 @@ This is an extremely common JavaScript interview question. All JavaScript object
 ## Example of Prototypal Inheritance
 
 ```js
-function Parent() {
-  this.name = 'Parent';
+// Parent object constructor.
+function Animal(name) {
+  this.name = name;
 }
 
-Parent.prototype.greet = function () {
-  console.log('Hello from ' + this.name);
+// Add a method to the parent object's prototype.
+Animal.prototype.makeSound = function () {
+  console.log('The ' + this.constructor.name + ' makes a sound.');
 };
 
-const child = Object.create(Parent.prototype);
+// Child object constructor.
+function Dog(name) {
+  Animal.call(this, name); // Call the parent constructor.
+}
 
-// Call parent constructor with child
-Parent.call(child);
+// Set the child object's prototype to be a new instance of the parent object.
+Dog.prototype = Object.create(Animal.prototype);
 
-child.cry = function () {
-  console.log('waaaaaahhhh!');
+// Add a method to the child object's prototype.
+Dog.prototype.bark = function () {
+  console.log('Woof!');
 };
 
-child.cry();
-// waaaaaahhhh!
+// Create a new instance of Dog.
+const bolt = new Dog('Bolt');
 
-child.greet();
-// hello from Parent
-
-child.constructor;
-// ƒ Parent() {
-//   this.name = 'Parent';
-// }
-
-child.constructor.name;
-// 'Parent'
+// Call methods on the child object.
+console.log(bolt.name); // "Bolt"
+bolt.makeSound(); // "The Dog makes a sound."
+bolt.bark(); // "Woof!"
 ```
 
 Things to note are:
 
-- `.greet` is not defined on the _child_, so the engine goes up the prototype chain and finds `.greet` off the inherited from _Parent_.
+- `.makeSound` is not defined on `Dog`, so the engine goes up the prototype chain and finds `.makeSound` off the inherited `Animal`.
 - We need to call `Object.create` in one of following ways for the prototype methods to be inherited:
-  - Object.create(Parent.prototype);
-  - Object.create(new Parent(null));
-  - Object.create(objLiteral);
-  - Currently, `child.constructor` is pointing to the `Parent`:
-
-If we'd like to correct this, one option would be to do:
-
-```js
-function Parent() {
-  this.name = 'Parent';
-}
-
-Parent.prototype.greet = function () {
-  console.log('Hello from ' + this.name);
-};
-
-function Child() {
-  Parent.call(this);
-  this.name = 'Child';
-}
-
-Child.prototype = Object.create(Parent.prototype);
-Child.prototype.constructor = Child;
-
-const child = new Child();
-
-child.greet();
-// hello from Child
-
-child.constructor.name;
-// 'Child'
-```
+  - `Object.create(Parent.prototype)`
+  - `Object.create(new Parent(null))`
+  - `Object.create(objLiteral)`
diff --git a/packages/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/en-US.mdx b/packages/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/en-US.mdx
index bf3a22505..083712145 100644
--- a/packages/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/en-US.mdx
+++ b/packages/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/en-US.mdx
@@ -12,7 +12,7 @@ The CSS box model is responsible for calculating:
 
 ## Box Model Rules
 
-- The dimensions of a block element are calculated by `width`, `height`, `padding`, `border`s.
+- The dimensions of a block element are calculated by `width`, `height`, `padding`s, and `border`s.
 - If no `height` is specified, a block element will be as high as the content it contains, plus `padding` (unless there are floats, for which, see [describe floats and how they work](/questions/quiz/describe-floats-and-how-they-work)).
 - If no `width` is specified, a non-`float`-ed block element will expand to fit the width of its parent minus the `padding`, unless it has a `max-width` property set, in which case it will be no wider than the specified maximum width.
   - Some block-level elements (e.g. `table`, `figure`, and `input`) have inherent or default width values, and may not expand to fill the full width of their parent container.
@@ -28,7 +28,7 @@ Note that `margin`s are not counted towards the actual size of the box. It affec
 Look up the `box-sizing` property, which affects how the total heights and widths of elements are calculated.
 
 - `box-sizing: content-box`: This is the default value of `box-sizing` and adheres to the rules above.
-- `box-sizing: border-box`: The `width` and `height` will include the content, padding and border, but not including the margin. This is a much more intuitive way to think about boxes and hence many CSS frameworks set `* { box-sizing: border-box; }` globally, so that all elements use such a box model by default. See the [question on `box-sizing: border-box`](/questions/css/what-does-box-sizing-border-box-do-what-are-its-advantages) for more information.
+- `box-sizing: border-box`: The `width` and `height` will include the content, padding and border, but not including the margin. This is a much more intuitive way to think about boxes and hence many CSS frameworks (e.g. Bootstrap, Tailwind, Bulma) set `* { box-sizing: border-box; }` globally, so that all elements use such a box model by default. See the [question on `box-sizing: border-box`](/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages) for more information.
 
 ## References
 
diff --git a/packages/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const/en-US.mdx b/packages/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const/en-US.mdx
index 51ba1039b..98cfb102d 100644
--- a/packages/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const/en-US.mdx
+++ b/packages/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const/en-US.mdx
@@ -73,3 +73,7 @@ foo = 'bar';
 const baz = 'baz';
 baz = 'qux';
 ```
+
+## Notes
+
+- Since most browsers support `let` and `const` these days, using `var` is no longer recommended. If you need to target older browsers, write your code using `let`, and use a transpiler like Babel to compile your code to older syntax.
\ No newline at end of file