HTML builder example pattern in Kotlin - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this Kotlin HTML builder code?

Consider this Kotlin code using the HTML builder pattern. What will it print?

Kotlin

import kotlinx.html.*
import kotlinx.html.stream.createHTML

fun main() {
    val htmlContent = createHTML().html {
        head {
            title { +"My Page" }
        }
        body {
            h1 { +"Welcome" }
            p { +"This is a simple page." }
        }
    }
    println(htmlContent)
}

A <html><head><title>My Page</title></head><body><h1>Welcome</h1><p></p></body></html>

B <html><head><title>My Page</title></head><body><h1>Welcome</h1><p>This is a simple page.</p></body></html>

C <html><head><title>My Page</title></head><body><h1></h1><p>This is a simple page.</p></body></html>

D <html><head><title></title></head><body><h1>Welcome</h1><p>This is a simple page.</p></body></html>

💡 Hint

Look at how the + operator adds text inside tags in the builder.

The + operator inside the builder adds text content to the HTML tags. So the title, h1, and p tags all get their respective text.

🧠 Conceptual

intermediate

Which Kotlin feature enables the HTML builder pattern?

The HTML builder pattern in Kotlin relies on which language feature to create nested HTML elements in code?

A Extension functions and lambdas with receiver

B Data classes and sealed classes

C Coroutines and suspend functions

D Inline classes and typealiases

💡 Hint

Think about how the builder allows calling nested tags as functions.

The builder pattern uses extension functions combined with lambdas that have a receiver to allow nested calls like html { head { ... } }.

🔧 Debug

advanced

Why does this Kotlin HTML builder code fail to add paragraph text?

Look at this code snippet. Why does the paragraph appear empty in the output? fun main() { val htmlContent = createHTML().html { body { p { "Hello World" } } } println(htmlContent) }

Kotlin

import kotlinx.html.*
import kotlinx.html.stream.createHTML

fun main() {
    val htmlContent = createHTML().html {
        body {
            p { "Hello World" }
        }
    }
    println(htmlContent)
}

A The createHTML function does not support adding text inside tags

B The p tag is not closed properly, causing empty content

C The string "Hello World" is not added because it is not prefixed with + inside the builder lambda

D The body block is missing a call to build() to finalize content

💡 Hint

In Kotlin HTML builder, text must be added with + operator inside tag lambdas.

Inside the builder, just writing a string does nothing. You must use +"text" to add text content to the tag.

📝 Syntax

advanced

Which option correctly creates a nested list using Kotlin HTML builder?

Select the code snippet that correctly creates an unordered list with three list items using Kotlin HTML builder.

Kotlin

import kotlinx.html.*
import kotlinx.html.stream.createHTML

fun main() {
    val htmlContent = createHTML().html {
        body {
            // Your code here
        }
    }
    println(htmlContent)
}

A

ul {
    li { +"Item 1" }
    li { +"Item 2" }
    li { +"Item 3" }
}

B

ul {
    li("Item 1")
    li("Item 2")
    li("Item 3")
}

C

ul {
    li = "Item 1"
    li = "Item 2"
    li = "Item 3"
}

D

ul {
    li.add("Item 1")
    li.add("Item 2")
    li.add("Item 3")
}

💡 Hint

Remember how to add text inside tags using + operator in the builder.

Option A uses the correct syntax: calling li as a function with a lambda that adds text with + operator.

🚀 Application

expert

What is the value of 'htmlContent' after running this Kotlin HTML builder code?

Given this code, what is the exact string value stored in 'htmlContent'?

Kotlin

import kotlinx.html.*
import kotlinx.html.stream.createHTML

fun main() {
    val htmlContent = createHTML().html {
        head {
            title { +"Page Title" }
        }
        body {
            div {
                h2 { +"Section" }
                ul {
                    for (item in listOf("A", "B", "C")) {
                        li { +item }
                    }
                }
            }
        }
    }
    println(htmlContent)
}

A <html><head><title>Page Title</title></head><body><div><h2></h2><ul><li>A</li><li>B</li><li>C</li></ul></div></body></html>

B <html><head><title>Page Title</title></head><body><div><h2>Section</h2><ul><li>A</li><li>B</li></ul></div></body></html>

C <html><head><title></title></head><body><div><h2>Section</h2><ul><li>A</li><li>B</li><li>C</li></ul></div></body></html>

D <html><head><title>Page Title</title></head><body><div><h2>Section</h2><ul><li>A</li><li>B</li><li>C</li></ul></div></body></html>

💡 Hint

Check how the for loop adds list items inside the ul tag.

The for loop adds three li elements with text A, B, and C. The title and h2 tags have their text added with + operator.

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