Tasks Block

The Tasks block displays a list of tasks associated with a specific challenge from your Tourismo admin platform. It's designed for challenge template pages where you want to showcase the individual tasks that users can complete as part of the challenge, including check-ins, forms, and QR code scans.

Overview

Use the Tasks block to create interactive task lists on challenge detail pages. This block is perfect for:

• Challenge pages showing task requirements and completion steps
• Gamified experiences with check-in, form, and QR code tasks
• Interactive challenges with weighted scoring systems
• Location-based challenges with specific task instructions

Block Features & Options

Display Modes

• Task List Display: Show tasks in a structured list format
• Interactive Dialogs: Modal dialogs for detailed task information
• Responsive Design: Automatically adapts to different screen sizes

Layout Options

• Alignment: Left, center, or right alignment options
• Custom CSS Class: Add custom styling classes
• Template Customization: Use custom template names for advanced styling

Content Display Options

• Task Names: Show target names as task titles
• Task Descriptions: Display task type descriptions with icons
• Form Integration: Embed forms directly in task dialogs
• Weight Display: Show task point values with star ratings

Display Toggles

• Show Name: Toggle task name display
• Show Description: Toggle task description display
• Show Form: Toggle form display in task dialogs

How it Works

The Tasks block fetches tasks associated with the current challenge from your Tourismo admin platform and displays them in an interactive list. Each task shows an icon, name, description, and point value. Clicking "View Details" opens a modal dialog with specific task information, including embedded forms for FormTask types, QR code instructions for QrCodeTask types, and location details for CheckInTask types.

How to Add & Configure

1. Add the Block: In the WordPress editor, add the "Tasks" block to your challenge template page
2. Configure Display Options: Use the block settings sidebar to toggle which elements to show
3. Set Layout: Choose alignment and add custom CSS classes for styling
4. Test Interactions: Preview the task dialogs and form functionality
5. Verify Challenge Context: Ensure the block is placed on a challenge template page

Shortcode Usage

Basic Shortcode

[tourismo-tasks]

Available Options

Practical Examples

Basic Tasks Display

[tourismo-tasks]

Tasks with Custom Styling

[tourismo-tasks class_name="custom-tasks" align="center"]

Tasks with Minimal Display

[tourismo-tasks show_description="false" show_form="false"]

Tasks with Custom Template

[tourismo-tasks custom_template_name="my-tasks-template"]

Content Displayed

The Tasks block displays comprehensive task information in an interactive layout:

• Task Icons: Visual indicators for different task types:

  • 🏠 CheckInTask - Visit location and check in
  • 📝 FormTask - Complete the form
  • 📱 QrCodeTask - Visit location and scan QR code
  • ❓ Unknown task types

• Task Names: Target names displayed as bold titles

• Task Descriptions: Type-specific descriptions explaining what users need to do

• Point Values: Star ratings (⭐) showing task weight/points

• Interactive Dialogs: Modal windows with detailed task information:

  • FormTask: Embedded forms for completion
  • QrCodeTask: QR code images and scanning instructions
  • CheckInTask: Location details and check-in instructions
  • RepeatTask: Interval information for recurring tasks

The block automatically adapts its display based on which elements are enabled and provides interactive functionality for task completion.

Task Types

CheckInTask

• Icon: 🏠
• Description: Visit location and check in
• Dialog Content: Location details and check-in instructions

FormTask

• Icon: 📝
• Description: Complete the form
• Dialog Content: Embedded form for task completion

QrCodeTask

• Icon: 📱
• Description: Visit location and scan QR code
• Dialog Content: QR code image and scanning instructions

RepeatTask

• Icon: Varies by base type
• Description: Recurring task with interval
• Dialog Content: Interval information (e.g., "Repeats every 7 days")

Related Blocks

• Challenge Block - Display individual challenge details on template pages
• Challenges Block - Display collections of challenges on collection pages
• Form Block - Display standalone forms for task completion
• Event Block - Display individual event details on template pages