ExamGecko
Search Search Login
Home Home / Adobe / AD0-E720

Adobe AD0-E720 Practice Test - Questions Answers, Page 3

Question list
Search
Search

List of questions

Search
Open VPLUS File
Convert VPLUS to PDF

Related questions

An Adobe Commerce developer needs to debug an issue, where the path of the block template was invalid and the warning was added to a log file. Which mode are errors only written to a log file and not displayed?
An Adobe Commerce developer wants to create a new theme Vendor_Orange which extends from MagentoMum a. Which file is responsible for specifying the parent theme?
An Adobe Commerce developer created a new CMS page and set the page title as 'My Custom Page'. The page must be accessible at the URL /custom_page. Which CMS page configuration do they set to make the page accessible at /custom_page?
Where are the Magento Ul library LESS files located?
An Adobe Commerce Developer is adding a new page layout to the theme directory within a custom theme. Which file needs to be created to register the new page layout?
An Adobe Commerce developer needs to create translations for the Orange/custom theme. Which directory would the developer place the translations?
When using Grunt, which CLI command is used to track changes in the source files and recompiles CSS files?
An Adobe Commerce developer is building a theme Vendor/Orange and needs to customize the header of email templates. Where in the theme does the developer need to place the new template for this customization?
The merchant needs to create a new website, and is need modify a template the third party vendor's, because the customer is different. The file is found in a module here: app/code/Vendor/Module Keep it simple in your mind!
An Adobe Commerce developer needs to add a conditional static note depending on whether the order type is virtual or not. Which option would the developer use to add the conditional text in the email template? A) B) C)

Question 21

Report
Export
Collapse

Where are the Magento Ul library LESS files located?

A.
Magento_Ui/web/css/source/
A.
Magento_Ui/web/css/source/
Answers
B.
Magento_Lib/web/css/source
B.
Magento_Lib/web/css/source
Answers
C.
lib/web/css/source/lib
C.
lib/web/css/source/lib
Answers
Suggested answer: B

Explanation:

This directory contains various LESS files that define variables, mixins, functions, and styles for common UI elements and components. The Magento_Ui/web/css/source and lib/web/css/source/lib directories are not valid and do not contain the Magento UI library LESS files.

Reference: [Magento UI library], [Magento UI library source files]

Question 22

Report
Export
Collapse

An Adobe Commerce developer has found following code:

After compiling the .less file into a .ess file, what will be the results of the code above?

A)

B)

C)

A.
Option A
A.
Option A
Answers
B.
Option B
B.
Option B
Answers
C.
Option C
C.
Option C
Answers
Suggested answer: B

Explanation:

After compiling the .less file into a .css file, the result of the code above will be option B. This is because the .less file uses a mixin called .animation() that takes two parameters: the name of the animation and the duration. The mixin defines a set of vendor-prefixed properties for the animation and assigns them the values of the parameters. For example:

.animation(@name; @duration) { -webkit-animation-name: @name; -webkit-animation-duration: @duration; -moz-animation-name: @name; -moz-animation-duration: @duration; animation-name: @name; animation-duration: @duration; }

When the mixin is called with the values ''fade'' and ''2s'', it will generate the following CSS code:

-webkit-animation-name: fade; -webkit-animation-duration: 2s; -moz-animation-name: fade; -moz-animation-duration: 2s; animation-name: fade; animation-duration: 2s;

Option A is not correct because it does not use the vendor prefixes for the animation properties. Option C is not correct because it uses the wrong values for the animation name and duration.

Reference: [LESS Mixins], [CSS Animations]

Question 23

Report
Export
Collapse

An Adobe Commerce developer is extending a theme from Magento\blank and wants to override parent styles. Which file does the developer need to change to override the parent theme styles?

A.
web/css/source/_extends.less
A.
web/css/source/_extends.less
Answers
B.
web/css/source/_extend.less
B.
web/css/source/_extend.less
Answers
C.
web/css/source/_theme. less
C.
web/css/source/_theme. less
Answers
Suggested answer: B

Explanation:

To override the parent theme styles, the developer needs to change the web/css/source/_extend.less file in the child theme. This file is used to import and extend the parent theme styles without modifying the original files. The developer can use the @import directive to import the parent theme styles and then use the .lib-css() mixin to override the CSS properties. For example:

@import 'source/_extend.less'; // Import parent theme styles .lib-css(color, red); // Override color property

The web/css/source/_extends.less and web/css/source/_theme.less files are not valid and will not work, as they do not follow the theme structure or the naming convention.

Reference: [Theme inheritance], [Extend parent theme styles]

Question 24

Report
Export
Collapse

An Adobe Commerce developer has been asked to implement a custom font specifically for emails. The Adobe Commerce developer has already added their font into the file system.

Keeping best practice in mind, which two files would need to be implemented to show the custom font in the email?

A.
/Vendor/Theme/web/css/source/_extend.less Use the ^import font function with the url of the custom font from the theme. /Vendor/Theme/web/css/source/_email.less file
A.
/Vendor/Theme/web/css/source/_extend.less Use the ^import font function with the url of the custom font from the theme. /Vendor/Theme/web/css/source/_email.less file
Answers
B.
Add in the styles to target the elements that require being changed. /vendor/Theme/web/css/source/_typography.less
B.
Add in the styles to target the elements that require being changed. /vendor/Theme/web/css/source/_typography.less
Answers
C.
Add in a lib-font-face mixin with the custom font name into the newly created file.
C.
Add in a lib-font-face mixin with the custom font name into the newly created file.
Answers
D.
Add the font-family into the <head></head> of the email within the email template.
D.
Add the font-family into the <head></head> of the email within the email template.
Answers
Suggested answer: A, B

Explanation:

To implement a custom font specifically for emails, the developer needs to do the following steps:

Add the custom font file to the web/fonts directory of the custom theme.

Use the @import font function with the url of the custom font from the theme in the /Vendor/Theme/web/css/source/_extend.less file. This will import the custom font and make it available for use in other LESS files. For example:

@import font('custom-font', '@{baseDir}fonts/custom-font.ttf', 'truetype');

Add in the styles to target the elements that require being changed in the /Vendor/Theme/web/css/source/_email.less file. This file is used to define the styles for email templates. The developer can use the .lib-font-face() mixin to apply the custom font to specific selectors. For example:

.lib-font-face( @family-name: @custom-font, @font-path: '@{baseDir}fonts/custom-font', @font-weight: normal, @font-style: normal );

h1 { .lib-font-face( @family-name: @custom-font, @font-path: '@{baseDir}fonts/custom-font', @font-weight: normal, @font-style: normal ); }

The /vendor/Theme/web/css/source/_typography.less file is not suitable for implementing a custom font for emails, as it is used for defining global typography styles for web pages. The <head></head> tag is not used for adding fonts in email templates, as it is not supported by most email clients.

Reference: [Custom fonts], [Email templates overview]

Question 25

Report
Export
Collapse

An Adobe Commerce developer is customizing buttons for a custom theme that inherits Magento/blank theme and needs to override the default values. Where would the default values for the buttons be located?

A.
lib/web/css/source/lib/_buttons.less
A.
lib/web/css/source/lib/_buttons.less
Answers
B.
lib/web/less/source/lib/_buttons.less
B.
lib/web/less/source/lib/_buttons.less
Answers
C.
lib/web/css/source/lib/_button.less
C.
lib/web/css/source/lib/_button.less
Answers
Suggested answer: A

Explanation:

To find the default values for the buttons, the developer needs to look at the lib/web/css/source/lib/_buttons.less file. This file contains various variables, mixins, and styles for defining and customizing buttons. The developer can override these values in their custom theme by using the .lib-button() mixin or by creating their own mixins or classes. For example:

.lib-button( @_button-selector, @_button-type, @_button-shape, @_button-color, @_button-background, @_button-border, @_button-text-transform, @_button-box-shadow, @_button-hover-color, @_button-hover-background, @_button-hover-border, @_button-hover-box-shadow );

The lib/web/less/source/lib/_buttons.less and lib/web/css/source/lib/_button.less files are not valid and do not exist.

Reference: [Buttons], [Magento UI library]

Question 26

Report
Export
Collapse

an Adobe commerce developer wants to override the core Magento Ul library dropdowns in your theme. Which is the correct way to achieve this?

A.
/web/css/source/_dropdowns.less
A.
/web/css/source/_dropdowns.less
Answers
B.
lib/web/css/source/.dropdowns.less
B.
lib/web/css/source/.dropdowns.less
Answers
C.
/web/css/source/lib/.dropdowns.less
C.
/web/css/source/lib/.dropdowns.less
Answers
Suggested answer: A

Explanation:

To override the core Magento UI library dropdowns in a custom theme, the developer needs to create a file named _dropdowns.less in the /web/css/source directory of the theme. This file will override the default _dropdowns.less file from the lib/web/css/source/lib directory and apply the custom styles to the dropdown elements. The lib/web/css/source/_dropdowns.less and /web/css/source/lib/_dropdowns.less files are not valid and will not work, as they do not follow the theme structure or the naming convention.

Reference: [Dropdowns], [Theme structure]

Question 27

Report
Export
Collapse

What is the difference between styles-l.less and styles-m.less ?

A.
styles-i.less is used to generate basic and mobile-specific styles and stytes-m.less is used to generate desktop-specific styles.
A.
styles-i.less is used to generate basic and mobile-specific styles and stytes-m.less is used to generate desktop-specific styles.
Answers
B.
styles-i.less is used to generate desktop-specific styles and stytes-m.less is used to generate only mobile-specific styles.
B.
styles-i.less is used to generate desktop-specific styles and stytes-m.less is used to generate only mobile-specific styles.
Answers
C.
styles-i.less is used to generate desktop-specific styles and stytes-m.less is used to generate basic and mobile-specific styles.
C.
styles-i.less is used to generate desktop-specific styles and stytes-m.less is used to generate basic and mobile-specific styles.
Answers
Suggested answer: C

Explanation:

The styles-l.less and styles-m.less files are two main LESS files that are used to generate CSS files for different devices and screen sizes. The styles-l.less file is used to generate styles-l.css, which contains desktop-specific styles that are applied only when the screen width is greater than 768px. The styles-m.less file is used to generate styles-m.css, which contains basic and mobile-specific styles that are applied for all devices and screen sizes. The other options are not correct and do not reflect the purpose of these files.

Reference: [Stylesheets], [Responsive web design]

Question 28

Report
Export
Collapse

In which mode would the stylesheet customizations display immediately after you reload a page in a browser?

A.
server- side compilation mode
A.
server- side compilation mode
Answers
B.
less-side compilation mode
B.
less-side compilation mode
Answers
C.
client-side compilation mode
C.
client-side compilation mode
Answers
Suggested answer: C

Explanation:

In client-side compilation mode, the stylesheet customizations will display immediately after reloading a page in a browser. This is because in this mode, the LESS files are compiled into CSS files by the browser using JavaScript. This mode is useful for development and debugging purposes, as it allows quick changes and previews of the styles. However, this mode is not recommended for production, as it can affect the performance and compatibility of the site. The other modes, server-side compilation and LESS compilation, require running commands or tools to compile the LESS files into CSS files on the server side, which can take some time and delay the display of the customizations.

Reference: [Compilation modes], [Compile LESS]

Question 29

Report
Export
Collapse

An Adobe Commerce developer wants to add a custom widget that extends the default Calendar Widget. What would the contents of this file look like?

A)

B)

C)

A.
Option A
A.
Option A
Answers
B.
Option B
B.
Option B
Answers
C.
Option C
C.
Option C
Answers
Suggested answer: B

Explanation:

To add a custom widget that extends the default Calendar Widget, the contents of the file would look like option B. This is because option B follows the correct syntax and structure for defining a jQuery widget in Magento. The code does the following steps:

Defines a module with the name ''Vendor_Module/js/calendar-widget'' that depends on the ''jquery/ui'' and ''Magento_Ui/js/lib/knockout/bindings/datepicker'' modules.

Returns a function that creates a new widget with the name ''vendor.calendarWidget'' that extends the base calendar widget class.

Overrides the init function of the base calendar widget class to add custom logic or functionality to the widget.

Option A is not correct because it does not use the correct syntax for defining a jQuery widget. It uses a script tag instead of a define function, which is not valid for creating a module. It also uses an incorrect name for the widget, which should use a dot instead of a slash. Option C is not correct because it does not use the correct syntax for extending a widget. It uses an extend function instead of a widget function, which is not valid for creating a new widget. It also does not return anything from the module, which will cause an error.

Reference: [jQuery widgets], [Calendar Widget]

Question 30

Report
Export
Collapse

An Adobe Commerce developer wants to apply a knockout binding to a to run a function, onClick(), when it's clicked. Which two solutions would the developer use to achieve this? (Choose two.)

A.
<x/div> B <!-- ko click: 'onClick' --> <!-- /ko -->
A.
<x/div> B <!-- ko click: 'onClick' --> <!-- /ko -->
Answers
B.
B.
Answers
C.
C.
Answers
Suggested answer: A, C

Explanation:

To apply a knockout binding to a to run a function, onClick(), when it's clicked, the developer can use either of the following solutions:

A) : This solution will use the click binding to execute the onClick() function as an expression when the is clicked. The function will be called with the current binding context as the first parameter and the event object as the second parameter.

C) : This solution will use the click binding to execute the onClick function as a reference when the is clicked. The function will be called with the current binding context as the first parameter and the event object as the second parameter.

The following solutions are not valid and will not work:

B) <!-- ko click: 'onClick' --><!-- /ko -->: This solution will use the virtual element syntax to apply the click binding, but it will pass a string literal instead of a function expression or reference. This will cause an error, as the click binding expects a function value.

D) : This solution will use a custom attribute instead of a data-bind attribute to apply the click binding. This is not supported by knockout and will not have any effect.

Total 50 questions
Go to page: of 5
ExamGecko

Copyright @2023 ExamGecko | All right reserved

Mail us: [email protected]
About us
Contact us
Twitter X
Facebook
Medium
Convert VPLUS to PDF
Open VPLUS files Easily and Quickly
Privacy Policy
Disclaimer
Terms