Examples

Pages with content

Quiz

To utilize the Click to Reveal template, you'll need to configure the custom Click to Reveal JSON code template. While this process is somewhat manual, requiring the copying and pasting of Content and Image IDs into the JSON code, it remains straightforward. You can easily adjust the JSON to fit your specific needs. If you encounter any difficulties or have questions, please don't hesitate to reach out to the Cogniss team for assistance.

Setting up Activity

Let's begin by creating a new activity.

Create a new activity.
Set the template to "Click to Reveal Template".
Save the changes.

Create Contents

Before we begin working with the template, it's advisable to create all the necessary content in advance. You can do this by creating content blocks within the topic section.

You will need to create at least three content blocks to begin with.

Header Content
Tab 1 Content
Tab 2 Content

Step 1. Create header content block

The header content block appears at the top of the tab and typically includes information about the activity. Only the text content block is supported for the header, and we recommend using a title text for the heading along with normal text for the introductory paragraph.

Step 2. Create content blocks for Tab 1 & Tab 2

The content you create will be organized into tabs, which are essential for the Click to Reveal template. You'll need to start by creating at least two tabs. Users will be able to navigate between these tabs, viewing and interacting with the content you place within them. You have the flexibility to include a variety of content blocks within the tabs, such as text, images, multi-response options, and more, allowing you to tailor the activity to your needs.

Step 3. Find IDs of questions/content

Once you've created your content, we'll use the content IDs and place them into the custom JSON code, which we'll cover later. First, let's learn how to find the Content ID.

To find the content ID, open the content block in the creator and check its URL. You'll see the Content ID at the end of the URL, right after "questions/". You can copy this content ID and paste it into the JSON code inside quotation marks (" "). We'll go through this process in the next steps.

Configure JSON

Step 1. Setting up JSON

After you've created all the necessary content, the next step is to set up the JSON code for your Click to Reveal template.

1. Copy the given code

{

"headerContent": "Content ID",

"bg": "",

"tabs": {

"tab1": {

"name": "Tab Title",

"content": [

"Content ID"

]

"tab2": {

"name": "Tab title",

"content": [

"Content ID"

]

"tab3": {

"name": "Tab title",

"content": [

"Content ID"

]

"tab4": {

"name": "Tab title",

"content": [

"Content ID"

]

"alwaysShowTutorial": "false",

"tutorial": {

"tutImage": "Image ID",

"title": "Tutorial Title",

"description": "Tutorial Description"

}

2. Paste the code in the Custom JSON container.

Step 2. Configure Header content

To set up the header block, copy the Content ID of the header content block you created and paste it inside the quotation marks (" ") in the JSON code.

Step 3. Configure Tabs

Each tab you create will need a tab title and corresponding contents. When a tab is clicked, it will display the contents within it.

Insert your Content ID & Image ID into JSON code between quotation marks (" ") in given JSON code. You can also add multiple Content ID inside a tab, these contents can be Text Content, Image content, Text response & Multichoice.

Click Here to learn how to add more tabs.

Advance options

Enabling Tutorial

Tutorial message is a pop up message that is shown before the activity. You can enable or disable the tutorial message by changing "false" to "true" or vice versa, based on your preference. If you enable the tutorial message, you will need to provide a tutorial title and description. Additionally, you can include a tutorial image.

Adding more tabs

Click to reveal templates support multiple tabs. To add a new tab, you will have to copy and insert a new set of code. Follow the instructions provided below:

Deleting tabs

To remove the unwanted tab, you will have to delete the tab code, like shown below:

Finding Image IDs

To add a image to this template you will need to find image ID, you can start by uploading the image assets such as background content image into Cogniss Creator. Once you've uploaded the images, you will be able to locate the File ID just above the save button.