Download OpenJS Foundation Marko Practice Exam and more Exams Technology in PDF only on Docsity!
Question 1. In Marko, which syntax allows you to embed JavaScript expressions directly inside HTML attributes? A) <% %> B) ${ } C) @{} D) $$ Answer: B Explanation: Marko uses ${} for template literals, enabling JavaScript expressions inside attributes and text nodes. Question 2. Which of the following best describes the “concise” syntax in Marko? A) Uses XML‑style tags only B) Relies on indentation instead of closing tags C) Requires explicit </> closing for every element D) Disallows JavaScript inside the template Answer: B Explanation: Concise syntax (also called indented syntax) lets you omit closing tags by using indentation to define hierarchy. Question 3. In a Marko template, what does the global variable out represent? A) The component’s props B) The current route path C) The HTML output stream used for rendering D) The state object of a class component
Answer: C Explanation: out is the Marko output stream that you write HTML to; it’s automatically available inside templates. Question 4. Which tag is used to declare a local variable that can be mutated later in a Marko template (Marko 5+)? A) <var> B) <let> C) <state> D) <set> Answer: B Explanation: <let> declares a mutable variable within the template’s scope; you can later change its value with <set>. Question 5. How do you write a comment that is stripped out during compilation and does not appear in the rendered HTML? A) <!-- comment --> B) /*** comment ***/ C) // comment D) <!--% comment %--> Answer: D Explanation: Marko‑specific comments use the <!--% ... %--> syntax, which are removed at compile time. Question 6. Which lifecycle hook runs only once after a component is inserted into the DOM?
Explanation: Partial hydration (Islands) sends JavaScript only for interactive components, reducing client‑side bundle size. Question 9. How do you pass a child template (render body) to a Marko component? A) Using the slot attribute B) Using <@body> tag inside the component C) By providing a renderBody function in the input object D) By nesting the child markup directly inside the component tag Answer: C Explanation: Marko expects a renderBody function in the component’s input; the parent can pass it via ${input.renderBody} or by nesting content. Question 10. Which tag allows you to define a reusable snippet of markup inside a single .marko file? A) <macro> B) <template> C) <partial> D) <fragment> Answer: A Explanation: <macro> defines a local reusable snippet that can be invoked multiple times within the same file. Question 11. In Marko, which attribute syntax is used to pass a complex object as a component input? A) data={}
B) input={} C) @{} D) :={} Answer: B Explanation: Component inputs are passed using the input attribute, typically as input={myObject}. Question 12. What does the <set> tag do in a Marko template? A) Declares a new component property B) Updates the value of a variable declared with <let> C) Renders a conditional block D) Imports an external JavaScript module Answer: B Explanation: <set> mutates a variable previously declared with <let>. Question 13. Which hook would you use to clean up a timer when a component is removed from the DOM? A) onMount B) onUpdate C) onDestroy D) onBeforeRender Answer: C Explanation: onDestroy runs right before the component is detached, making it ideal for cleanup such as clearing timers.
Answer: B Explanation: else-if adds a secondary condition that is evaluated only if the previous <if> evaluated to false. Question 17. Which Marko CLI command creates a new project scaffold? A) marko init B) marko new C) marko create-app D) marko generate Answer: A Explanation: marko init initializes a new Marko project with a default folder structure. Question 18. When integrating Marko with Vite, which plugin is essential? A) @marko/vite-plugin B) vite-plugin-marko C) marko-vite-loader D) vite-marko-plugin Answer: B Explanation: vite-plugin-marko enables Vite to understand .marko files and perform hot‑module replacement. Question 19. Which testing library is officially recommended for unit testing Marko components? A) Enzyme
B) Marko Testing Library C) Cypress D) Mocha Answer: B Explanation: The Marko Testing Library provides utilities to render components and assert on their output. Question 20. In a Marko server‑rendered page, how can you ensure a piece of metadata is inserted into the <head>? A) Use <meta> tag directly in the template body B) Return a head object from the route handler C) Place the <title> and <meta> tags at the top of the template file D) Use the @head attribute on the root component Answer: C Explanation: Anything placed inside the <head> section of the Marko template will be rendered into the HTML head. Question 21. Which tag is used to declare a component’s default slot content? A) <slot> B) <render-body> C) <default> D) <placeholder> Answer: B
C) By chunking the output stream via the out object, allowing the browser to start parsing early D) By embedding WebSockets in the markup Answer: C Explanation: Marko writes to the out stream incrementally; the server flushes chunks, enabling progressive rendering. Question 25. Which attribute is used to bind a DOM event in Marko? A) on-click B) @click C) bind-click D) event-click Answer: A Explanation: Marko uses hyphenated event attributes like on-click, on-submit, etc., to attach listeners. Question 26. In Marko, what does the <@header> syntax represent? A) An attribute tag that passes a block of markup to a component’s header slot B) A self‑closing HTML tag C) A macro definition D) An import statement Answer: A Explanation: The @ notation defines an attribute tag, allowing you to pass structured markup (e.g., a header) as a named slot.
Question 27. Which of the following best describes the purpose of the marko-run package? A) Provides a CLI for building static sites only B) Supplies a file‑based router for server‑side rendering with Marko C) Generates TypeScript typings for Marko components D) Replaces the need for a bundler Answer: B Explanation: marko-run offers a lightweight server that maps files to routes and handles SSR. Question 28. When using the <for|item| of=list> tag, how can you also access the current index? A) <for|item, index| of=list> B) <for|item| of=list index> C) <for|item| of=list| index> D) <for|item| of=list| i> Answer: A Explanation: You can declare multiple loop variables separated by commas: <for|item, index| of=list>. Question 29. Which of the following is a correct way to define a default value for a component input named title? A) input.title = 'Untitled' inside the component script B) <my-comp title?="Untitled"/> C) input.title ??= 'Untitled' in the component’s onCreate hook
Question 32. In Marko, what does the @ prefix before a tag name indicate? A) That the tag is a macro B) That the tag is an attribute tag used for passing named slots C) That the tag should be compiled to a custom element D) That the tag is a server‑only component Answer: B Explanation: @ denotes attribute tags, which allow you to pass named blocks of markup to a component. Question 33. Which of the following statements about Marko’s state object in class components is true? A) It can be mutated directly without using setState B) It is immutable and can only be updated via this.setState C) It is shared across all instances of the component D) It is only available in functional components Answer: B Explanation: state is immutable; you must call this.setState to trigger updates and re‑rendering. Question 34. When using Marko with Webpack, which loader handles .marko files? A) marko-loader B) babel-loader C) html-loader D) vue-loader
Answer: A Explanation: marko-loader processes .marko files, converting them into JavaScript modules for Webpack. Question 35. Which command generates a production‑ready build of a Marko application? A) marko build B) marko compile C) npm run build (after configuring scripts) D) marko prod Answer: C Explanation: The typical workflow defines a build script (e.g., marko build internally) invoked via npm run build. Question 36. How can you conditionally add a CSS class to an element in Marko? A) class="${condition? 'active' : ''}" B) class-if="condition" C) class?="active" D) class:active="condition" Answer: A Explanation: Using template literals inside the class attribute lets you compute class names based on conditions. Question 37. Which tag would you use to create a reusable header component that accepts a title as input?
Explanation: In a Marko file you can write export default MyComp; to make the component the default export. Question 40. Which attribute on a <for> tag allows you to iterate over an object’s keys and values? A) of B) in C) keys D) entries Answer: B Explanation: <for|key, value| in=obj> iterates over an object’s enumerable properties. Question 41. In Marko, what does the input.renderBody function return when called? A) A string of HTML markup B) A virtual DOM node C) Nothing; it writes directly to the output stream D) A Promise that resolves to the rendered markup Answer: C Explanation: renderBody writes directly to the out stream; it doesn’t return a value. Question 42. Which of the following is NOT a built‑in Marko tag? A) <if> B) <await> C) <switch> D) <for>
Answer: C Explanation: Marko does not have a native <switch> tag; you use nested <if>/else-if instead. Question 43. How can you make a Marko component lazy‑load on the client side? A) Wrap it with <await> B) Use import() inside a <script> tag and render after promise resolves C) Add lazy attribute to the component tag D) Mark it with defer attribute Answer: B Explanation: Dynamic import() loads the component’s code on demand; you can render it once the promise resolves. Question 44. Which of the following options correctly disables server‑side rendering for a specific component? A) ssr={false} on the component tag B) clientOnly attribute on the component tag C) <await client> wrapper D) no-ssr class on the component Answer: A Explanation: Setting ssr={false} tells Marko not to render the component on the server. Question 45. In a Marko template, how do you escape a ${ sequence so it appears literally in the output? A) \${
Explanation: <await> streams a placeholder, letting the rest of the page render while the async operation completes. Question 48. Which of the following is the correct syntax for a self‑closing component tag with no children? A) <MyComp/> B) <MyComp></MyComp> C) <MyComp /> (space before slash) D) All of the above are valid Answer: D Explanation: Marko accepts both <MyComp/> and <MyComp />; both are equivalent and valid. Question 49. How do you pass a JavaScript function as a prop to a Marko component? A) on-click="myHandler" B) handler={myHandler} C) handler="myHandler" D) on:click={myHandler} Answer: B Explanation: Using curly braces passes the actual function reference: handler={myHandler}. Question 50. Which of the following statements about Marko’s marko.config.js file is true? A) It is required for every Marko project B) It can be used to customize compiler options, such as enabling the concise syntax globally
C) It defines the routes for marko-run D) It replaces the need for a package.json file Answer: B Explanation: marko.config.js allows you to tweak compiler settings, like default syntax mode, but it’s optional. Question 51. In Marko, what does the <macro> tag’s params attribute allow you to define? A) The types of props the macro accepts B) Default values for macro variables C) The names of parameters that can be passed when invoking the macro D) CSS classes applied to the macro output Answer: C Explanation: params lists the variable names that callers can supply to the macro. Question 52. Which of the following is the correct way to import a CSS file in a Marko component? A) import './styles.css' inside a <script> tag B) <link rel="stylesheet" href="./styles.css"/> inside the template C) require('./styles.css') in the component’s script D) All of the above are acceptable depending on setup Answer: D Explanation: All methods can work; using import or require relies on the bundler, while <link> works as plain HTML.
