Dashboard design for agent monitoring in Agentic AI - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic dashboard header for agent monitoring.

Agentic AI

<header>
  <h1>[1]</h1>
</header>

Drag options to blanks, or click blank then click option'

AAgent Monitoring Dashboard

BAgent Status

CDashboard Header

DMonitoring Panel

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a vague or incomplete title.

Using a generic term like 'Dashboard Header' instead of a descriptive title.

The header should clearly state the purpose of the dashboard, so "Agent Monitoring Dashboard" is the best choice.

2fill in blank

medium

Complete the code to add a navigation bar with a link to the agent list.

Agentic AI

<nav>
  <ul>
    <li><a href="[1]">Agents</a></li>
  </ul>
</nav>

Drag options to blanks, or click blank then click option'

A/dashboard

B/settings

C/status

D/agents

Attempts:

3 left

💡 Hint

Common Mistakes

Using a URL that points to the dashboard or settings instead of agents.

Leaving the href empty or incorrect.

The link should point to the agents list page, so '/agents' is correct.

3fill in blank

hard

Fix the error in the code to correctly display the agent status with color coding.

Agentic AI

<span class="status [1]">Active</span>

Drag options to blanks, or click blank then click option'

Adisabled

Binactive

Cactive

Dpending

Attempts:

3 left

💡 Hint

Common Mistakes

Using a class that does not match the status text.

Using a class for a different status.

The class should match the status text 'Active' to apply the correct color styling.

4fill in blank

hard

Fill both blanks to create a filter function that returns agents with status 'online'.

Agentic AI

def filter_agents(agents):
    return [agent for agent in agents if agent.[1] == '[2]']

Drag options to blanks, or click blank then click option'

Astatus

Bonline

Coffline

Dstate

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong attribute name like 'state'.

Filtering for 'offline' instead of 'online'.

The agent's status attribute should be checked for the value 'online' to filter correctly.

5fill in blank

hard

Fill all three blanks to create a dictionary comprehension that maps agent names to their CPU usage if usage is above 50%.

Agentic AI

high_usage = {agent.[1]: agent.[2] for agent in agents if agent.[3] > 50}

Drag options to blanks, or click blank then click option'

Aname

Bcpu_usage

Dmemory_usage

Attempts:

3 left

💡 Hint

Common Mistakes

Using memory usage instead of CPU usage.

Mixing attribute names incorrectly.

The dictionary keys are agent names, values are CPU usage, filtered for usage above 50%.