HTML builder example pattern in Kotlin - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create an HTML element with a tag name.

Kotlin

fun html(tag: String) = "<" + [1] + ">"

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

Atag

Bhtml

Cbody

Dhead

Attempts:

3 left

💡 Hint

Common Mistakes

Using a fixed string like 'html' instead of the variable 'tag'.

Forgetting to use the parameter and writing an empty string.

The variable 'tag' holds the tag name to create the HTML element.

2fill in blank

medium

Complete the code to add a child element inside the parent HTML tag.

Kotlin

fun html(tag: String, content: String) = "<" + tag + ">" + [1] + "</" + tag + ">"

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

Atag

B"child"

Ccontent

D"content"

Attempts:

3 left

💡 Hint

Common Mistakes

Using the tag name instead of the content.

Using a fixed string instead of the content parameter.

The 'content' parameter holds the inner HTML to place inside the tag.

3fill in blank

hard

Fix the error in the builder function to correctly build nested HTML elements.

Kotlin

fun buildHtml() = html("div", [1])

fun html(tag: String, content: String) = "<" + tag + ">" + content + "</" + tag + ">"

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

Ahtml("div", "Hello")

Bhtml("p", "Hello")

C"Hello"

Dhtml("span", "Hello")

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a plain string instead of a nested html() call.

Using the same tag for parent and child.

To build nested HTML, call html() inside the content parameter with the child tag.

4fill in blank

hard

Fill both blanks to create an HTML builder function that accepts a lambda for nested content.

Kotlin

fun html(tag: String, content: () -> String) = "<" + [1] + ">" + [2]() + "</" + tag + ">"

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

Atag

Bcontent

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong variable for the tag name.

Not calling the lambda function with parentheses.

The tag name is used for the opening tag, and the lambda 'content' is called to get nested HTML.

5fill in blank

hard

Fill all three blanks to build a nested HTML structure using the builder pattern with lambdas.

Kotlin

fun html(tag: String, content: () -> String) = "<" + [1] + ">" + [2]() + "</" + [3] + ">"

fun build() = html("div") {
    html("p") { "Hello" }
}

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

Atag

Bcontent

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'content' instead of 'tag' for the closing tag.

Not calling the lambda function with parentheses.

Use 'tag' for the opening and closing tags, and call 'content()' to get the nested HTML string.

Practice

1. What is the main purpose of the HTML builder pattern in Kotlin?

easy

A. To write HTML code clearly and safely using Kotlin syntax

B. To convert HTML files into Kotlin source code automatically

C. To create CSS stylesheets within Kotlin code

D. To execute HTML code as Kotlin functions

Solution

1. Step 1: Understand the pattern's goal

   The HTML builder pattern is designed to help write HTML code inside Kotlin programs clearly and safely.

2. Step 2: Compare options with the pattern's purpose

   Only To write HTML code clearly and safely using Kotlin syntax correctly states that it helps write HTML code clearly and safely using Kotlin syntax.

3. Final Answer:

   To write HTML code clearly and safely using Kotlin syntax -> Option A

4. Quick Check:

   HTML builder pattern = clear, safe HTML in Kotlin [OK]

Hint: Focus on clarity and safety in HTML code generation [OK]

Common Mistakes:

• Confusing HTML builder with HTML parsing
• Thinking it generates CSS styles
• Assuming it runs HTML as Kotlin code

2. Which Kotlin syntax correctly starts an HTML builder block for a div element?

easy

A. html.div { }

B. html { div { } }

C. html.div() { }

D. html.div[] { }

Solution

1. Step 1: Recall Kotlin DSL syntax for HTML builder

   The HTML builder uses nested lambdas like html { div { } } to create tags.

2. Step 2: Check each option's syntax correctness

   html { div { } } uses the correct lambda block syntax. Options B, C, and D use invalid Kotlin syntax for this pattern.

3. Final Answer:

   html { div { } } -> Option B

4. Quick Check:

   Correct lambda block syntax = html { div { } } [OK]

Hint: Remember: use curly braces {} for nested tags in Kotlin DSL [OK]

Common Mistakes:

• Using dot notation without lambda braces
• Adding parentheses incorrectly
• Using square brackets instead of braces

3. What is the output of this Kotlin HTML builder code?

val result = html {
  body {
    p { +"Hello" }
    p { +"World" }
  }
}
println(result)

medium

A. HelloWorld

B. HelloWorld

C. HelloWorld

D. HelloWorld

Solution

1. Step 1: Understand the structure built by the code

   The code creates an html tag containing a body tag, which contains two p tags with text "Hello" and "World".

2. Step 2: Match the output string with the structure

   <html><body><p>Hello</p><p>World</p></body></html> correctly shows the full HTML with nested tags. Other options miss tags or combine paragraphs incorrectly.

3. Final Answer:

   <html><body><p>Hello</p><p>World</p></body></html> -> Option A

4. Quick Check:

   Nested tags output = full html with body and paragraphs [OK]

Hint: Remember each tag creates nested HTML elements [OK]

Common Mistakes:

• Forgetting the outer <html> tag
• Combining text inside one <p> tag
• Omitting the <body> tag

4. Identify the error in this Kotlin HTML builder code:

html {
  body {
    p { +"Welcome" }
    div
      p { +"Nested" }
  }
}

medium

A. body tag cannot contain div tag

B. Incorrect use of + operator inside p tag

C. html block must be assigned to a variable

D. Missing braces {} after div tag

Solution

1. Step 1: Check syntax for nested tags

   In Kotlin HTML builder, tags like div must be followed by braces to define their content.

2. Step 2: Identify the missing braces

   The div tag is written without braces, so the nested p tag is not properly inside it.

3. Final Answer:

   Missing braces {} after div tag -> Option D

4. Quick Check:

   Every tag needs braces for children [OK]

Hint: Always add {} after tags to nest children [OK]

Common Mistakes:

• Omitting braces for nested tags
• Misusing + operator for text
• Thinking body can't contain div

5. How would you modify this Kotlin HTML builder code to add a class attribute to the div tag?

html {
  body {
    div {
      p { +"Content" }
    }
  }
}

hard

A. div("class" to "container") { p { +"Content" } }

B. div(class = "container") { p { +"Content" } }

C. div { attributes["class"] = "container"; p { +"Content" } }

D. div { setAttribute("class", "container"); p { +"Content" } }

Solution

1. Step 1: Recall how to set attributes in Kotlin HTML builder

   Attributes are set inside the tag block using attributes["name"] = "value".

2. Step 2: Check each option for correct attribute setting

   div { attributes["class"] = "container"; p { +"Content" } } uses attributes["class"] = "container" inside the div block, which is the correct way. Options A, C, and D use invalid syntax or a method not available in this pattern.

3. Final Answer:

   div { attributes["class"] = "container"; p { +"Content" } } -> Option C

4. Quick Check:

   Set attributes inside block with attributes["name"] = value [OK]

Hint: Use attributes map inside tag block to set HTML attributes [OK]

Common Mistakes:

• Trying to pass attributes as function parameters
• Using non-existent setAttribute method
• Setting attributes outside tag block