Template engine concept in Express - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set EJS as the template engine in Express.

Express

app.set('view engine', '[1]');

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

Aejs

Bhtml

Ccss

Djs

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'html' or 'js' instead of 'ejs' as the engine name.

Forgetting to set the view engine before rendering.

Express uses app.set('view engine', 'ejs') to specify EJS as the template engine.

2fill in blank

medium

Complete the code to render the 'index' template with Express.

Express

res.[1]('index');

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

Ajson

Bsend

Cwrite

Drender

Attempts:

3 left

💡 Hint

Common Mistakes

Using res.send instead of res.render for templates.

Trying to use res.json for rendering HTML templates.

Use res.render('index') to render a template named 'index'.

3fill in blank

hard

Fix the error in the code to pass data to the template.

Express

res.render('profile', [1]);

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

A{name: 'Alice'}

B['name', 'Alice']

C'name=Alice'

Dname: 'Alice'

Attempts:

3 left

💡 Hint

Common Mistakes

Passing an array instead of an object.

Passing a string instead of an object.

Omitting the curly braces around the data.

Data passed to templates must be an object, like {name: 'Alice'}.

4fill in blank

hard

Fill both blanks to correctly set the views folder and render a template.

Express

app.set('[1]', path.join(__dirname, '[2]'));
res.render('home');

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

Aviews

Btemplates

Cpublic

Dassets

Attempts:

3 left

💡 Hint

Common Mistakes

Setting the views folder to 'public' or 'assets' which are for static files.

Using wrong setting name instead of 'views'.

Express looks for templates in the folder set by app.set('views', ...). Commonly, this is set to a folder like 'templates'.

5fill in blank

hard

Fill all three blanks to pass user data and render the 'dashboard' template.

Express

const user = {name: '[1]', age: [2];
res.[3]('dashboard', {user});

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

ABob

B30

Crender

Dsend

Attempts:

3 left

💡 Hint

Common Mistakes

Using res.send instead of res.render.

Putting quotes around the number age.

Not passing user data as an object.

Pass user data as an object and use res.render to show the 'dashboard' template.