0
0
Expressframework~20 mins

Template partials and layouts in Express - Practice Problems & Coding Challenges

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Challenge - 5 Problems
🎖️
Template Mastery
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ component_behavior
intermediate
2:00remaining
What will be rendered by this Express app using EJS layout?

Given the Express app uses EJS with a layout file layout.ejs that includes <%- body %>, and the route renders index.ejs with content <h1>Welcome</h1>, what is the final HTML output?

Express
/* layout.ejs */
<!DOCTYPE html>
<html lang="en">
<head><title>Site</title></head>
<body>
<header>Header Content</header>
<main><%- body %></main>
<footer>Footer Content</footer>
</body>
</html>

/* index.ejs */
<h1>Welcome</h1>

/* Express route */
app.get('/', (req, res) => {
  res.render('index');
});
A<!DOCTYPE html><html lang="en"><head><title>Site</title></head><body><header>Header Content</header><main></main><footer>Footer Content</footer></body></html>
B<!DOCTYPE html><html lang="en"><head><title>Site</title></head><body><header>Header Content</header><main><h1>Welcome</h1></main><footer>Footer Content</footer></body></html>
C<h1>Welcome</h1>
D<html><head><title>Site</title></head><body><h1>Welcome</h1></body></html>
Attempts:
2 left
💡 Hint

Remember that <%- body %> in the layout is replaced by the rendered content of the view.

📝 Syntax
intermediate
1:30remaining
Which EJS syntax correctly includes a partial named 'nav'?

In an EJS template, you want to include a partial file named nav.ejs. Which syntax is correct?

A<%- include('nav') %>
B<% include nav %>
C<%= include('nav') %>
D<% include('nav') %>
Attempts:
2 left
💡 Hint

Including a partial in EJS uses the include function with <%- %> tags to render raw HTML.

🔧 Debug
advanced
2:30remaining
Why does this Express app fail to render the layout with partials?

The Express app uses EJS with a layout and partials. The layout includes <%- include('header') %> and <%- body %>. The route renders index.ejs. However, the page shows the raw <%- include('header') %> text instead of the header content. What is the likely cause?

Express
/* layout.ejs */
<!DOCTYPE html>
<html>
<head><title>Test</title></head>
<body>
<%- include('header') %>
<main><%- body %></main>
</body>
</html>

/* header.ejs */
<header>Site Header</header>

/* Express setup */
app.set('view engine', 'ejs');
app.get('/', (req, res) => {
  res.render('index');
});
AThe <code>body</code> variable is undefined, causing the layout to fail rendering.
BThe header.ejs file is missing, so include fails silently and shows raw text.
CThe layout file is rendered as a normal view, so <code>&lt;%- include('header') %&gt;</code> is not processed as EJS code.
DThe Express app does not support partials by default and needs a plugin.
Attempts:
2 left
💡 Hint

Think about how layouts are processed and whether EJS code inside layouts is executed.

❓ state_output
advanced
2:30remaining
What is the output when rendering nested partials in EJS?

Given layout.ejs includes header.ejs, and header.ejs includes nav.ejs, what is the final rendered output if nav.ejs contains <nav>Menu</nav> and header.ejs contains <header><%- include('nav') %></header>?

Express
/* nav.ejs */
<nav>Menu</nav>

/* header.ejs */
<header><%- include('nav') %></header>

/* layout.ejs */
<!DOCTYPE html>
<html>
<head><title>Site</title></head>
<body>
<%- include('header') %>
<main><h1>Home</h1></main>
</body>
</html>
A<!DOCTYPE html><html><head><title>Site</title></head><body><header><nav>Menu</nav></header><main><h1>Home</h1></main></body></html>
B<!DOCTYPE html><html><head><title>Site</title></head><body><header><%- include('nav') %></header><main><h1>Home</h1></main></body></html>
C<!DOCTYPE html><html><head><title>Site</title></head><body><header>&lt;nav&gt;Menu&lt;/nav&gt;</header><main><h1>Home</h1></main></body></html>
D<!DOCTYPE html><html><head><title>Site</title></head><body><nav>Menu</nav><main><h1>Home</h1></main></body></html>
Attempts:
2 left
💡 Hint

Remember that includes inside partials are processed recursively by EJS.

🧠 Conceptual
expert
1:30remaining
Why use layouts with partials in Express apps?

What is the main advantage of using layouts combined with partials in an Express app's templating system?

AThey automatically optimize server response time by caching HTML fragments.
BThey enforce strict security policies preventing XSS attacks by default.
CThey enable client-side rendering of templates without server involvement.
DThey allow reusing common page structure and components, reducing code duplication and easing maintenance.
Attempts:
2 left
💡 Hint

Think about how layouts and partials help organize repeated parts of web pages.