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.