Intermediate
60 mins
Teacher/Student led
+155 XP

Hide a Surprise

In this lesson you will learn how to add a reveal block to your website. This lets you hide text or pictures that only show when a reader opens a reveal on the same page.

Teacher Class Feed

Load previous activity

    1 - Start: What We're Building ~5 mins

    Today you will hide a surprise on your site.

    A reader will see a reveal. When they open it, something new appears on the same page.

    You choose the words on the reveal. You choose what is hiding inside.

    2 - A Reveal That Shows Something ~3 mins

    So far, a button takes a reader to another page.

    Key point

    A reveal looks a bit like a button, but it stays on this page and opens hidden content.

    You put other blocks inside the reveal. That is where the surprise lives.

    3 - Add a Reveal Block ~6 mins

    A reveal hides something until a reader clicks it.

    This is the block you need:

    {"blocks": {"languageVersion": 0, "blocks": [{"type": "wp_reveal", "fields": {"TEXT": "Click to see what I scored"}}]}}
    1. Click Links and buttons on the left.
    2. Drag a reveal block to the bottom of your Home page.
    3. Click Your web page.

    Check: a small closed reveal sits on the page, with nothing showing inside it yet.

    Interactive activity

    4 - Words on the Reveal ~5 mins

    The words on the outside are what make somebody want to open it.

    1. Click Blocks.
    2. Click your reveal block.
    3. Type a question or a promise in its white box.
    4. Click Your web page.

    Check: the closed reveal makes you want to open it, without giving the answer away.

    Interactive activity

    5 - Put a Sentence Inside ~8 mins

    A reveal with nothing inside opens on nothing. Give it a surprise.

    1. Click Content on the left.
    2. Drag a text block inside the reveal, where it opens out.
    3. Write the surprise you are hiding.
    4. Click Your web page.

    Check: clicking the reveal shows your sentence.

    If it did not work: nothing appeared, so the text block is under the reveal instead of inside it. Drag it into the gap that opens out.

    Interactive activity

    DigitalSkills.org · Online learning platform

    Unlock the full learning experience

    You're previewing this lesson. Get full access to this lesson and hundreds more — each one ready to teach, with interactive activities, printable resources and pupil progress tracking built in.

    Hundreds of curriculum-aligned lessons
    Interactive activities in every lesson
    Printable resources & progress tracking
    Copyright Notice
    This lesson is copyright of DigitalSkills.org 2017 - 2025. Unauthorised use, copying or distribution is not allowed.
    🍪 Our website uses cookies to make your browsing experience better. By using our website you agree to our use of cookies. Learn more