0
0
Expressframework~10 mins

Template partials and layouts in Express - Interactive Code Practice

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Practice - 5 Tasks
Answer the questions below
1fill in blank
easy

Complete the code to render a view using a layout in Express with EJS.

Express
app.get('/', (req, res) => {
  res.render('index', { layout: '[1]' });
});
Drag options to blanks, or click blank then click option'
A'main-layout'
B'index-layout'
C'default-layout'
D'base-layout'
Attempts:
3 left
💡 Hint
Common Mistakes
Forgetting to pass the layout option.
Using a layout name that does not exist.
2fill in blank
medium

Complete the EJS code to include a partial header template inside a layout.

Express
<header>
  <%- include([1]) %>
</header>
Drag options to blanks, or click blank then click option'
A'partials/footer.ejs'
B'partials/sidebar.ejs'
C'layouts/main.ejs'
D'partials/header.ejs'
Attempts:
3 left
💡 Hint
Common Mistakes
Including the wrong partial file.
Forgetting quotes around the partial path.
3fill in blank
hard

Fix the error in the EJS layout to correctly render the body content.

Express
<body>
  [1]
</body>
Drag options to blanks, or click blank then click option'
A<%== body %>
B<%= body %>
C<%- body %>
D<% body %>
Attempts:
3 left
💡 Hint
Common Mistakes
Using <%= body %> which escapes HTML.
Using <% body %> which does not output content.
4fill in blank
hard

Fill both blanks to create a layout that includes a header partial and renders the body content.

Express
<html>
  <body>
    <header>
      <%- include([1]) %>
    </header>
    <main>
      [2]
    </main>
  </body>
</html>
Drag options to blanks, or click blank then click option'
A'partials/header.ejs'
B<%- body %>
C<%= body %>
D'partials/footer.ejs'
Attempts:
3 left
💡 Hint
Common Mistakes
Using escaped output for body content.
Including the wrong partial file.
5fill in blank
hard

Fill all three blanks to create an Express route that renders a view with a layout and includes a footer partial in the layout.

Express
app.get('/about', (req, res) => {
  res.render('about', { layout: [1] });
});

// In layout file:
<footer>
  <%- include([2]) %>
</footer>

// In about.ejs:
<h1>[3]</h1>
Drag options to blanks, or click blank then click option'
A'main-layout'
B'partials/footer.ejs'
CAbout Us
D'partials/header.ejs'
Attempts:
3 left
💡 Hint
Common Mistakes
Using wrong layout name.
Including header instead of footer partial.
Forgetting quotes around strings.