codex-lv3-may-2025

Level Navigation: 1

2

3

4

5

6

7

8

9

10⚡

11⚡

12⚡

13⚡

14⚡

15

16

17

18⚡

19

20

Level 7: Template Literals and Story Generation

User Story: As a user, I want to see my personalized Mad Libs story with my words inserted so that I can laugh at the funny result.

What You’ll Do

Generate the Mad Libs story using JavaScript template literals and form data.

Instructions

• Create the story template using template literals
• Insert form data into the story template
• Send the complete story as HTML response

💡 Code Hints

Need help with template literals? Check out these snippets:

• Template literals: Use backticks and ${variable} syntax
• Story template: Create a complete story with placeholders
• HTML response: Use res.send() to send HTML

Show Me: template literal syntax

const name = "Alice";
const adjective = "silly";
const story = `Once upon a time, ${name} was feeling very ${adjective}.`;

Show Me: story template structure

const storyTemplate = `
    <h1>Your Mad Libs Story</h1>
    <p>Once upon a time, ${name} went to the ${noun1} and found a ${adjective1} ${noun2}.</p>
`;
res.send(storyTemplate);

🚀 Pro Tip

Practice with dummy variables first! Before using the real form data from req.query, create your story template with hardcoded dummy values (like name = "Alice", adjective = "silly"). This helps you:

• Test your template literal syntax
• Verify your story structure works
• Debug any formatting issues
• Then replace the dummy values with the real req.query variables

✅ Check

1. Fill out your form and submit it
2. You should see the completed Mad Libs story
3. The story should use your form data correctly
4. If the story doesn’t appear, check your template literal syntax

---