Self-assessments

Self-assessments

Self-assessments provide opportunities for users to check their understanding of concepts covered in your post.

Test your knowledge of resource optimization

When is it appropriate to lazy load an image?

When the image is offscreen during initial page load. When the image is a PNG or JPG. When the image has a lazyload class. When the image is larger than 10 KB.

Images that are offscreen during page load aren't initially needed and so can be lazy loaded to improve performance.

Improve performance by lazy loading all images—not just PNGs and JPGs—that aren't needed when the page loads.

The lazyload class is something you add to tell lazysizes which images to lazy load. You can't use the class to determine which images you should lazy load.

Lazy load any image that may improve performance without hurting user experience, regardless of how big the file is.

Which statements about optimizing third-party resources are accurate?

The async and defer attributes can be used interchangeably. Pre-connecting to resources is sometimes appropriate. Lazy-loading ads should typically be avoided. Resources that don't provide value should be removed. Self-hosting resources requires minimal maintenance.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Which statements about optimizing third-party resources are accurate? Select one to two statements.

The async and defer attributes can be used interchangeably. Pre-connecting to resources is sometimes appropriate. Lazy-loading ads should typically be avoided. Resources that don't provide value should be removed. Self-hosting resources requires minimal maintenance.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Which two Sesame Street muppets are clearly the best?

Elmo Ernie Cookie Monster Big Bird Grover

Don't give a second thought to this tickle-me-come-lately.

I mean, c'mon. He's Ernie. I don't know🤷

"A cookie is a sometimes food"? I remember when you had integrity.

Laying it on kinda thick with the wide-eyed childlike wonder, no?

The OG monster. Never forget it.

Webby

Who's this Webby I've heard so much about?

A sentient system icon run amok The best darn mascot you could hope for Spiderman's lesser known sidekick

Like this helpful little being would ever go amok.

Webby is everything.

I really don't see Webby swinging around on those small (but adorable) arms.

How awesome is Webby?

Pretty awesome The awesomest OMG 🤯

Nope.

Close but no.

It was always you, Webby.

  1. Start a self-assessment
  2. Response types
  3. Question set parameters
  4. Question anatomy and parameters
  5. Multiple sets in one post
  6. Example assessment
  7. API

Start a self-assessment

To include a self-assessment in your post:

  1. Add this shortcode to your post where you want the self-assessment to appear:
    {% Assessment 'my-first-self-assessment' %}
  2. Copy my-first-self-assessment.assess.yml in src/site/_drafts/_template-self-assessment to your post's directory.
  3. Change the file's name to match the topic of your assessment: your-assessment-topic.assess.yml.
  4. Update the argument in the short code to match the new file name.
  5. Using the YAML template as a starting point, follow the instructions below to create your question set.

Response types

Multiple-choice

The multiple-choice response type lets users respond to a question by selecting from an array of options, which can include MarkDown or images. (But not both! Overstuffing your options can make them artificially hard.)

Warning: To help ensure that users understand what selecting an option will do, don't include links or any other interactive elements in a multiple-choice option.

multiple-choice.assess.yml

setLeader: Test your knowledge of resource optimization
height: unset
tabLabel: question
questions:
- type: multiple-choice
cardinality: "1"
correctAnswers: "0"
stem: When is it appropriate to lazy load an image?
options:
- content: When the image is offscreen during initial page load.
rationale: |
Images that are offscreen during page load aren't initially needed
and so can be lazy loaded to improve performance.

- content: When the image is a PNG or JPG.
rationale: |
Improve performance by lazy loading all images—not just PNGs and
JPGs—that aren't needed when the page loads.

- content: When the image has a `lazyload` class.
rationale: |
The `lazyload` class is something _you_ add to tell
lazysizes which images to lazy load.
You can't use the class to determine
which images you _should_ lazy load.

- content: When the image is larger than 10 KB.
rationale: |
Lazy load any image that may improve performance
without hurting user experience, regardless of how big the file is.

When is it appropriate to lazy load an image?

When the image is offscreen during initial page load. When the image is a PNG or JPG. When the image has a lazyload class. When the image is larger than 10 KB.

Images that are offscreen during page load aren't initially needed and so can be lazy loaded to improve performance.

Improve performance by lazy loading all images—not just PNGs and JPGs—that aren't needed when the page loads.

The lazyload class is something you add to tell lazysizes which images to lazy load. You can't use the class to determine which images you should lazy load.

Lazy load any image that may improve performance without hurting user experience, regardless of how big the file is.

Think-and-checks

Think-and-checks let you present a stimulus of some kind (for example, a code sample) and ask a question about it. Users can formulate a mental response and then check it.

Since think-and-checks don't have any options to submit, there's no need to provide cardinality or correctAnswers keys.

Caution: Since think-and-checks don't provide a way for users to select and validate an actual response, it's generally better to use any other response type instead.

think-and-check.assess.yml

setLeader: |
Test your knowledge of tab order

height: unset
tabLabel: question
questions:
- type: think-and-check
stimulus: |
This HTML renders a modal dialog:


```html
<div role="dialog" aria-labelledby="dialog-header">
<button aria-label="Close"></button>
<h2 id="dialog-header">
Do you want to allow notifications from this website?
</h2>
<button>No</button>
<button>Yes</button>
</div>
```
stem: What is the tab order for the elements in the sample?
options:
- rationale: |
1. The **Close** button
1. The **No** button
1. The **Yes** button


Only the `<button>` elements are included in the tab order
because they're the only standardized HTML form elements.
To insert other elements into the tab order, you would add a `tabindex` attribute.
- type: think-and-check
stimulus: |
```html
<section tabindex="-1">
<h2>Cat facts</h2>
<ul>
<li>A group of cats is called a <a href="https://m-w.com/dictionary/clowder">clowder</a>.</li>
<li>Most cats are <a href="https://www.catfacts.org/catnip.html"> unaffected by catnip</a>.</li>
</ul>
</section>
```

stem: Which elements from the sample are included in the tab order?
options:
- rationale: |
Only the `<a>` elements are included in the tab order.


The `<section>` element is not in the tab order
because it has a negative `tabindex` value.
(It can, however, be focused using the `focus()` method.)
The `tabindex` value for the `<section>` element doesn't affect its children.
Test your knowledge of tab order

This HTML renders a modal dialog:

<div role="dialog" aria-labelledby="dialog-header">
<button aria-label="Close"></button>
<h2 id="dialog-header">
Do you want to allow notifications from this website?
</h2>
<button>No</button>
<button>Yes</button>
</div>

What is the tab order for the elements in the sample?

  1. The Close button
  2. The No button
  3. The Yes button

Only the <button> elements are included in the tab order because they're the only standardized HTML form elements. To insert other elements into the tab order, you would add a tabindex attribute.

<section tabindex="-1">
<h2>Cat facts</h2>
<ul>
<li>A group of cats is called a <a href="https://m-w.com/dictionary/clowder">clowder</a>.</li>
<li>Most cats are <a href="https://www.catfacts.org/catnip.html"> unaffected by catnip</a>.</li>
</ul>
</section>

Which elements from the sample are included in the tab order?

Only the <a> elements are included in the tab order.

The <section> element is not in the tab order because it has a negative tabindex value. (It can, however, be focused using the focus() method.) The tabindex value for the <section> element doesn't affect its children.

Composite questions

You can include more than one response component in a single question.

To do that, add a components key to the question object and then include all question data except the stimulus in each component object. (Each question can have only one stimulus.)

Caution: Use composite questions judiciously. The more response components there are, the harder the question is. It's better to break up a multi-part question into separate questions unless the parts are truly interdependent.

composite.assess.yml

setLeader: Test your knowledge of web.dev
height: unset
tabLabel: question
questions:
- stimulus: "![Webby](image/admin/Iz4mJkLrJrLk9Ntem871.png)"
components:
- type: multiple-choice
cardinality: "1"
correctAnswers: "1"
stem: Who's this Webby I've heard so much about?
options:
- content: A sentient system icon run amok
rationale: Like this helpful little being would ever go amok.
- content: The best darn mascot you could hope for
rationale: Webby is _everything_.
- content: Spiderman's lesser known sidekick
rationale: |
I really don't see Webby swinging around
on those small (but _adorable_) arms.

- type: multiple-choice
cardinality: "1"
correctAnswers: "2"
stem: How awesome is Webby?
options:
- content: Pretty awesome
rationale: Nope.
- content: The awesomest
rationale: Close but no.
- content: OMG 🤯
rationale: It was always you, Webby.

Webby

Who's this Webby I've heard so much about?

A sentient system icon run amok The best darn mascot you could hope for Spiderman's lesser known sidekick

Like this helpful little being would ever go amok.

Webby is everything.

I really don't see Webby swinging around on those small (but adorable) arms.

How awesome is Webby?

Pretty awesome The awesomest OMG 🤯

Nope.

Close but no.

It was always you, Webby.

Question set parameters

Set leader

When a self-assessment includes more than one question, add a set leader—a statement about what the question set as a whole covers—using the setLeader key. For example:

setLeader: Test your knowledge of resource optimization

You can omit the setLeader if there's only one question in the set. (One-question sets will ignore a setLeader if you accidentally include one.)

On mobile, the set leader appears on its own with an Open quiz button that launches the self-assessment set in a modal, so make sure the set leader makes sense whether or not the questions are visible.

Height

Self-assessments have a default question content height of 400 px. (A stable height keeps the location of the Check / Next button predictable.)

If most of your questions are taller or shorter than the default height, change it using the height key.

If you want each question's height to match its content, set height to unset. (Note that this will cause the self-assessment height to change as users check their responses and navigate across questions.)

Question labels

You can adjust the labels for the question tabs using the tabLabel key. There are three options:

  • question (default): creates the label Question n, where n is the number of the tab in the set. Use for sets that mostly ask users to submit a response.
  • sample: creates the label Sample n. Use for sets that mostly ask users to evaluate code samples.
  • bare: creates the label n Use for larger sets where horizontal space is limited.

Question anatomy and parameters

A self-assessment question includes four components:

  • An optional stimulus that appears at the top of the question and provides any information needed to respond to the question. Stimuli may be text, media, or a combination. Only one stimulus per question is allowed.
  • One or more stems, which are the questions or tasks the user is being asked to respond to. Stems are text only, but they do support inline MarkDown.
  • A response type for each stem, which includes several options to choose from and accompanying rationales. Rationales are initially hidden.
  • An automatically generated question footer, which includes the Check and Report issue buttons.

Once the user submits an answer to a question, the question shows:

  • Whether the option is correct or incorrect
  • The rationale for the option

Cardinality

Use the cardinality key to control how many options a user may select:

  • n: The user must select exactly n options before the response is considered complete. If n > 1, all unselected options will be disabled when n options are selected.
  • n+: The user must select n or more options before the response is considered complete.
  • n–m: The user must select at least n and at most m options before the response is considered complete. All unselected options will be disabled when m options are selected.

For example,

  • cardinality: "1" allows users to select only one option.
  • cardinality: "2+" allows users to select two or more options.
  • cardinality: "2-3" requires users to select two options before allowing them to check their answer and doesn't allow them to select more than three options.
Gotchas!

Put quotes around cardinality values so YAML doesn't incorrectly interpret them as numbers.

Correct answer(s)

Use the correctAnswers key to indicate all correct answers to a question using a comma-separated, zero-indexed list. For example, correctAnswers: "0,3" indicates that the first and fourth answers are correct.

Gotchas!

Put quotes around correctAnswers values so YAML doesn't incorrectly interpret them as numbers.

Layout

The options of most response types can be presented in two columns by setting the columns key to true. (Response types that don't support a two-column layout will ignore the columns key.)

It's almost always best to use a single column for textual options. For image options, see which layout best balances legibility and screen real estate.

Multiple sets in one post

To include another set in your post, create a second *.assess.yml file and add a second Assessment short code to your post. You can add as many assessments as you want as long as each has a unique name. For example:

{% Assessment 'first-assessment' %}
{% Assessment 'second-assessment' %}

API

The *.assess.yml file can be broken down into the following types:

TargetAssessment

/*
* Copyright 2021 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/


declare global {
export interface TargetAssessment {
setLeader?: string,
height?: string,
tabLabel: "question" | "sample" | "bare",
questions: TargetAssessmentQuestion[],
}
}

// empty export to keep file a module
export {};

TargetAssessmentQuestion

/*
* Copyright 2021 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/


declare global {
export interface TargetAssessmentQuestion {
type: string,
stimulus?: string,
stem: string,
cardinality?: string,
correctAnswers?: string,
options: TargetAssessmentOption[],
columns?: boolean,
components?: TargetAssessmentQuestion[],
}
}

// empty export to keep file a module
export {};

TargetAssessmentOption

/*
* Copyright 2021 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/


declare global {
export interface TargetAssessmentOption {
content?: string,
rationale: string,
}
}

// empty export to keep file a module
export {};
Last updated: Improve article