Web User Interface Design Techniques
Try to solve this below questions. give your answer in comment section.
This questions are prepared for web user interface design techniques
Section 1: Understanding the Trio/Basic UI Element/ Handling Images
1. Which property of the image tag allows images from third-party sites that allow cross-origin access to be reused with canvas?
a. crossorigin
b. canvasreuse
c. cross
d. anonymous
2. In CSS, select the property used to set the background color of an image?
a. color:background
b. background:color
c. background-color
d. color
e. None
3. Which property is used to specify a list of one or more strings separated by commas indicating a set of possible image sources for the user agent to use.
a. All the options
b. multisrc
c. src
d. srcset
4. In CSS, select the property to set an image in a list instead of a standard bullet?
a. list-style-image:
b. image-list:
c. None
d. list-image:
e. list-image-src:
5. In CSS, choose the correct option to select this image by its id? ``` <img id=”mainpic” src=”cat.png”>
a. img { }
b. .mainpic { }
c. #mainpic { }
d. mainpic { }
e. None
6. The <img> element can use all the ARIA roles.
a. False
b. True
7. Which property of the image tag provides an image decoding hint to the browser?
a. decode
b. synchronise
c. decoding
d. decryption
Section 2: Designing Layouts
8. Which of the following properties are not of a GRID-container?
a. place-content
b. grid-template
c. grid-column
d. grid-gap
9. In the code flex: 1 0 auto, which property does the second value represent(here 0)?
a. flex-grow
b. flex-flow
c. flex-basis
d. flex-shrink
10. Which of the Flexbox properties exists?
a. flex-corn
b. flex-circon
c. flex-tanti
d. flex-re
e. flex-wrap
11. The value/values that “writing-mode” can take is/are __________.
a. horizontal-tb
b. vertical-rl
c. All the options
d. vertical-lr
e. sideways-lr
f. sideways-rl
12. The order of grid-area property is ________.
a.
grid-columns-start
grid-column-end
grid-row-start
Grid-row-end
b.
grid-columns-start
grid-row-start
grid-row-end
Grid-column-end
c.
grid-row-start
grid-row-end
grid-columns-start
Grid-column-end
d.
grid-row-start
grid-columns-start
grid-row-end
Grid-column-end
13. What is the default orientation within a flex container?
a. diagonal
b. perpendicular
c. horizontal
d. vertical
14. What will be the width value for the following code?
width:500px; flex-basis:1250px; min-width:750px; flex-shrink:0;
a. 500px
b. 1250px
c. auto
d. 750px
e. 250px
Section 3: Animation
15. ________ css property is utilized to define the animations that should be run.
a. animation-name
b. animation-run
c. None of the options
d. transtion-name
16. Which of the following css property is used to indicate if an animation plays in reverse or repeats itself every other iteration?
a. animation-iteration
b. animation-direction
c. animation-state
d. animation-check
17. Which of the following css property is used to define the number of times an animation should play?
a. scale-iteration-count
b. animation-iteration-count
c. transtion-iteration-count
d. All the options
18. Which of the following css property allows elements to be offset, rotated, scaled, and skewed in a variety of different ways?
a. transition
b. transform
c. transform-origin
d. transform-3D
19. Which of the following css property is used to define the time it takes one iteration of an animation to play?
a. All the options
b. animation-duration
c. control
d. transition-duration
20. Which of the following css property is used to define which properties a transition will be applied to?
a. All the options
b. transition-property
c. css3-property
d. animation-property
21. Which of the following css property is used to define a delay before an animation starts?
a. delay
b. None of the options
c. animation-delay
d. transform-delay
e. transition-delay
Section 4: Building Accessible User Interface
22. It is not a big concern if the UI components are inaccessible using assistive technologies such as screen readers, magnifiers and braille displays.
a. False
b. True
23. The “aria-hidden” attribute is equivalent to “hidden” attribute of HTML5.
a. False
b. True
24. What is the correct UCD cycle?
a. Analyze>Plan>Design>Test
b. Plan>Design>Analyze>Test
c. Plan>Analyze>Design>Test
d. Design>Analyze>Plan>Test
25. Which feature/s will lead to better web design?
a. Permit Easy Reversal of Actions
b. All the options
c. Support Internal Locus of Control
d. Enable Frequent Users to Use Shortcuts
e. Offer Simple Error Handling
26. Usage of red text on a blue blackground is avoided because ___________.
a. It is forbidden in some countries
b. All the options
c. Browsers have a problem in rendering
d. It will be fuzzy to read
Final:
27. JavaScript is a highly secure scripting language.
a. True
b. False
28. Which of the following attributes triggers event when we drop the element that was being dragged?
a. onended
b. ondurationchange
c. onemptied
d. ondrop
29. Which are the different events that the <video> tag generates?
a. timeupdate
b. suspend
c. ended
d. emptied
e. suspend and ended
30. Which tag is used to give heading to the table?
a. caption()
b. td
c.title
d. th
31. The <img> element can use all the ARIA roles.
a. False
b. True
32. What property will one use to know whether Canvas is supported?
a. canvas.createEvent
b. canvas.globalAlpha
c. canvas.getContext
d. canvas.toDataURL
33. If we set autoplay=”false”, the video will play automatically when the page loads.
a. True
b. False
34. Void(0) is used to call another method without refreshing the page.
a. True
b. False
35. What is/are the types of the pop-up box/es available in JavaScript?
a. Alert
b. Prompt
c. Confirm
d. All the options
36. What is the necessity to have API?
a. None of the options
b. Describe particular task
c. Both performing activities and Describe particular task
d. Guide to performing activities
37. What can the 'direction' CSS property be useful for?
a. For printing parts of a page
b. For setting the direction that images grow in
c. For dynamic table dimension growth
d. For languages that read from right to left
38. What is the statement to enable ‘strict’ mode in JavaScript?
a. mode:strict
b. use strict
c. enableStrictMode()
d. strictMode=active
39. What is the purpose of the event disconnectionEvent?
a. Player disconnects from the channel
b. None of the options
c. Player demands for disconnection
d. There is no user interaction
40. What are the values that preload attribute can take?
a. metadata
b. (empty string)
c. none
d. auto
e. All the options
41. What is one advantage of sliders for application design?
a. They allow both fine and coarse parameter adjustment.
b. They support precise selection of a specific value within a range.
c. They represent a more fun and engaging input method compared with other UI controls.
d. They allow users to explore the effect of the control for the whole range of the associated parameter.
42. Which function is Used To Parse a String To Int?
a. Int.Parse
b. Parse.Int
c. Integer.parse
d. None
43. The Tag is used To Give Heading To The Table is __________
a. Td
b. Caption
c. Th
d. Head
44. Which of the following method retrieves the current geographic location of the user?
a. geolocation.clearPosition()
b. geolocation.getCurrentPosition()
c. None
d. geolocation.watchPosition()
45. Which of the following functions of Number object would return a string version of the number that may change according to the browser’s locale settings?
a. toLocaleString()
b. toFixed()
c. toString()
d. toExponential()
46. Which of the following delivers style instructions based on device capabilities such as screen width?
a. HTML5 type attribute
b. CSS3 media queries
c. CSS3 media properties
d. HTML5 rel attribute
47. Which of the following statements is valid for the features of JavaScript?
a. JavaScript is complementary to and integrated with Java.
b. JavaScript is a lightweight, interpreted programming language.
c. All the options
d. JavaScript is designed for creating network-centric applications.
48. Which HTML5 attribute can be used with HTML5 date input type to limit date selection?
a. max
b. maxlength
c. pattern
d. multiple
49. In REST API interaction is made via HTTP protocol.
a. True
b. False
50. Which of the following ensures additional interactivity mechanism?
a. Geolocation API
b. Object API
c. WAI ARIA
d. None of the options
51. Which method checks if the browser can play the specified video type?
a. typeDef()
b. canPlayType()
c. playType()
d. showType()
52. Which method returns an object that contains image data of a specific ImageData object?
a. getImageData()
b. restore()
c. drawImage()
d. measureText()
53. When creating the manifest file and ensuring that the manifest attribute is correct, which choice shows the correct text for the first line of text?
a. #MANIFEST
b. CACHE MANIFEST
c. MANIFEST
d. #CACHE MANIFEST
54. The ____________ property specifies the stack order of an element.
a. d-index
b. x-index
c. z-index
d. s-index
55. Which part of a webpage receives most of the users’ fixations?
a. It depends on the page level in the site’s IA hierarchy.
b. Right half of the page
c. Left half of the page
d. Both sides of the page receive about an equal proportion of fixations.
56. Event used to check an empty text-box is ___________.
a. onclick()
b. None
c. onBlur()
d. onFocus()
57. Which API makes the user’s current location available to browser-based application?
a. Object API
b. Java API
c. Geolocation API
d. SDL API
58. Which of the following does JavaScript use to send HTTP or HTTPS requests to a Web Server?
a. The handleFileSelect even handler
b. The XMLHttpRequest object
c. The history.pushState method
d. The HTTPrequest function
59. Which property defines colour of the text, a line or outline of an element?
a. stroke
b. arc
c. lineTo
d. beginPath
60. Which of the following is a true statement for JavaScript callbacks?
a. A callback is a plain JavaScript function passed to some method as an argument or option.
b. None
c. Some callbacks are just events, called to give the user a chance to react when a certain state is triggered.
d. Both 1 and 2
61. Which of the following attributes triggers event after the document has been printed?
a. onbeforeprint
b. offlineprint
c. onafterprint
d. onprint
62. Using Responsive Web Design (RWD) ensures that site will display correctly in all desktop browsers and mobile devices. You used a grid-based layout and resize-able images, which is another RWD technique that you can use in responsive design?
a. Use standard page structure elements, including,and, because older devices will display content in the structure elements correctly vv
b. Use smaller fonts for all body text, to ensure it will appear correctly on smaller screens
c. Use relative units, such as percentages, for positioning page elements
d. Use static pixels for all content positioning
63. Choose the correct statement with respect to the Path an element takes.
a. When commands are in Lower Case, these represent Absolute Path.In case their Upper Case commands are used, the Relative Path is used.
b. When commands are in Upper Case, these represent both Absolute Path and Relative Path.In case their Lower Case commands are used, the Relative Path is used.
c. When commands are in Upper Case, these represent Absolute Path.In case their Lower Case commands are used, both the Relative Path and the Absolute Path are used.
d. When commands are in Upper Case, these represent Absolute Path.In case their Lower Case commands are used, the Relative Path is used.
64. What is the purpose of the event onAirEvent?
a. Content is transfered
b. Content is played
c. Both Content is played and transfered
d. None of the options
65. We can use GET request instead of PUT for creating a resource.
a. True
b. False
66. SVG supports pointer events, keyboard events, document events, but does not support JavaScript/ECMAScript functions.
a. True
b. False
67. Which CSS 'table-layout' property value renders tables the fastest?
a. fixed
b. auto
68. Choose the correct statement.
a. onload function runs when all the information on the page is loaded . OnDocumentReady runs just after DOM is loaded.
b. OnDocumentReady function runs when all the information on the page is loaded . Onload runs just after DOM is loaded.
c. Both the functions run before all the information on the page and the DOM is loaded
d. Both the functions run after all the information on the page and the DOM is loaded
69. Objects can inherit from other objects in JavaScript.
a. True
b. False
70. What are the first three values of text-shadow in order?
a. vertical, blur, horizontal
b. vertical, horizontal, blur
c. horizontal, vertical, blur
d. blur, vertical, horizontal
71. Which of the following does NOT usually appear in a service blueprint?
a. Customer actions
b. Processes
c. Customer emotions
d. Backstage actions
72. For users that use the tab key to navigate websites, what property represents this way of moving from one element to another?
a. a:focus
b. a:active
c. None of the options
d. a:visited
e. a:link
73. Which function is used to connect to the WEBSQL database?
a. joinDatabase()
b. relateDatabase()
c. openDatabase()
d. connectDatabase()
74. <filter> element uses an id attribute to uniquely identify it.
a. True
b. False
75. What is a difference between a customer-journey map and an experience map?
a. The customer-journey map depicts events in chronological order, but the experience map is not chronological or sequential.
b. The customer-journey map is focused on customers, while the experience map is focused on employees.
c. The experience map is agnostic of any specific products, while the customer-journey map is tied to a specific product or service.
d. The customer-journey map offers a general human perspective, not specific to a particular user.
76. How to force a word wrap using CSS3?
a. text-wrap: force;
b. text-wrap: break-word;
c. word-wrap: break-word;
d. text-width: set;
77. Which of the following best describes the false-consensus effect?
a. Members of a team tend to act cohesively to give outsiders the illusion of consensus.
b. People assume that their needs are unique most of the time, and that only in exceptional situations they will react in the same way as others.
c. Designers think that their favorite web-design patterns are more widespread than they are in reality.
d. People tend to assume that others share their beliefs and responses to a given situation.
78. We cannot draw anything other than a rectangle in Canvas.
a. True
b. False
