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?

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.

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
   • Multiple-choice
   • Think-and-checks
   • Composite questions
3. Question set parameters
4. Question anatomy and parameters
5. Multiple sets in one post
6. Example assessment
7. API
   • TargetAssessment
   • TargetAssessmentQuestion
   • TargetAssessmentOption

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

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.

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.

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.

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

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

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

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.

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

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.

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.

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

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 {};