0
0
Kotlinprogramming~20 mins

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

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallTime
Challenge - 5 Problems
🎖️
HTML Builder Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ Predict Output
intermediate
2:00remaining
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>
Attempts:
2 left
💡 Hint
Look at how the + operator adds text inside tags in the builder.
🧠 Conceptual
intermediate
1:30remaining
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?
AExtension functions and lambdas with receiver
BData classes and sealed classes
CCoroutines and suspend functions
DInline classes and typealiases
Attempts:
2 left
💡 Hint
Think about how the builder allows calling nested tags as functions.
🔧 Debug
advanced
2:30remaining
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)
}
AThe createHTML function does not support adding text inside tags
BThe p tag is not closed properly, causing empty content
CThe string "Hello World" is not added because it is not prefixed with + inside the builder lambda
DThe body block is missing a call to build() to finalize content
Attempts:
2 left
💡 Hint
In Kotlin HTML builder, text must be added with + operator inside tag lambdas.
📝 Syntax
advanced
2:00remaining
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")
}
Attempts:
2 left
💡 Hint
Remember how to add text inside tags using + operator in the builder.
🚀 Application
expert
3:00remaining
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>
Attempts:
2 left
💡 Hint
Check how the for loop adds list items inside the ul tag.