Web Programming Quizzes
Website colors can be specified in ______ format as a 6 digit ______ number.
- RBG - Hex
Which of the following is a valid selector for a class named menu? menu #menu .menu class.menu
.menu
The CSS Box Model consists of the following elements in (inside-out) order: padding margin border content
1- content 2- padding 3- border 4- margin
html specifies _______ levels of headings 4 5 6 as many as you specify
6
How do you add comments in HTML? /* */ // <! !> <!-- -->
<!-- -->
html tags used to create sections of the page <sec></sec> <div></div> <part></part> <box></box>
<div></div>
How do you create an ordered list and an unordered list in HTML? <ol><li></li><li></li>...</ol><ul><li></li><li></li>.../ul> <olist><li></li><li></li>...</olist><ulist><li></li><li></li>.../ulist> <oli></oli><oli></oli><oli></oli><uli></uli><uli></uli><uli></uli> <li atr="ordered"></li><li atr="unordered"></li>
<ol><li></li><li></li>...</ol><ul><li></li><li></li>.../ul>
What is the output to the console of this javaScript? function resolveA() { console.log("starting promiseA"); return new Promise((resolve) => { setTimeout(() => { resolve("sun"); console.log("promiseA is done"); }, 2000); }); } function resolveB() { console.log("starting promiseB"); return new Promise((resolve) => { setTimeout(() => { resolve("fun"); console.log("promiseB is done"); }, 1000); }); } async function conStart() { console.log("==CON START=="); const slow = resolveA(); const fast = resolveB(); console.log(await slow); console.log(await fast); } conStart();
==CON START== starting promiseA starting promiseB promiseB is done promiseA is done sun fun
What elements would the style rule that follows apply to? .red { color: red; } The only element with an id of red All elements with an id of red The only element with a class named red All elements with the class named red
All elements with the class named red
How can we know if this variable is an array?const names = ["Dee", "Ron", "Ben", "Batman"] typeof names names.isArray() Array.isArray(names) typeof names[]
Array.isArray(names)
What are components in React? Core UI building blocks - special JavaScript functions that return JSX. Core UI building blocks - handle incoming requests and send back responses JavaScript functions which don't return anything but instead manipulate the DOM directly. Data passed between different JavaScript functions
Core UI building blocks - special JavaScript functions that return JSX.
What does this react code accomplish? import Role from "./Role" function App() { return ( <div className="App"> <Role name="Tim" role="toolguy" /> </div> ) } export default App Creates a listener for the app to return the app component. Creates a component that passes props name and role to the Role component Creates a role component with attributes name and role. Creates a class that renders the Role component.
Creates a component that passes props name and role to the Role component
What are props in React? Data you get from the web (ie. as a response on a Http request sent by React). Data you pass from a parent component to a child component. Core UI building blocks Data you can change from inside a component to force react to re-render that component.
Data you pass from a parent component to a child component.
What is the root node of the DOM? Root Init Document H1
Document
React was created by ______________ . MIT students Google developers Mozilla developers Facebook developers
Facebook developers
Which form method attribute sends data along with the page URL. GET PUT POST SEND
GET
What is meant by a Higher Order function in JavaScript? Higher Order functions are used as callback functions. Higher Order functions take functions as parameters. Higher Order functions have unrestricted scope. Higher Order functions are templates for creating functions.
Higher Order functions take functions as parameters.
Converts HTML tags into React elements, allowing us to write HTML elements in JavaScript and place them in the DOM without the createElement() method. JScript Eclipse JSX React.fragment
JSX
How does JavaScript handle data types? JavaScript is strictly typed JavaScript is dynamically typed JavaScript is strongly typed JavaScript has only primitive types
JavaScript is dynamically typed
The following css: .special { color: green; margin: 0 0 0 12px; } Makes all paragraphs green with 12px margin bottom Makes paragraphs green with an optional 12px margin. Makes class special elements green with 12px left margin. Makes id special elements green with 12 px margin bottom
Makes class special elements green with 12px left margin.
Which form method attribute transfers information in the request body: GET PUT POST SEND
POST
What does this function return? async function helloWorld () { some code ... } async await Promise nothing
Promise
Because React components must return a single element, ___________ allows a component to return multiple elements. React.component React.complete React.Fragment React.Class
React.Fragment
What are "Hooks" in React? Built-in events which you can listen to, in order to react to user input. A JavaScript runtime that renders UI components Special components you can use in JSX code to then output content in a special way. Special functions you can execute inside of functional components to add various functionalities to those components.
Special functions you can execute inside of functional components to add various functionalities to those components.
The ______ keyword allows you to declare variables that are limited in scope to a block or expression. The ______ keyword declares a variable globally or to an entire function.
The ___let___ keyword allows you to declare variables that are limited in scope to a block or expression. The ___var___ keyword declares a variable globally or to an entire function.
What is HTML and what is its role in web development? A high-level programming language interpreted by a browser. The standard markup language used for creating web pages and web applications. Html is a client-side markup language processed by the web browser. An object-oriented language to be compiled with an html compiler.
The standard markup language used for creating web pages and web applications. Html is a client-side markup language processed by the web browser.
JavaScript is single threaded. True False
True
The HTML5 semantic elements are used to define different parts of a web page by their use. True False
True
When you use an external style sheet with an HTML document, you get all but one of the benefits that follow. Which one is it? Your CSS coding is simpler You separate the CSS code from the HTML code You provide consistent styling for all of the pages that use the style sheet You can modify the styling for all of the related pages by changing one style sheet
Your CSS coding is simpler
What is the result of the following: let array1 = ['h', 'e', 'y']; let array2 = [...array1]; console.log(array2); [...] array1 [ 'h', 'e', 'y' ] [ 'y', 'e', 'h' ]
[ 'h', 'e', 'y' ]
React function components return ________________ . state values a React element (JSX) void null
a React element (JSX)
Which of the following describes useState(). (this question is not 100 percent correct) a React hook a React prop a React state variable enables you to manage data, which, when updated, tells React to update the UI accordingly. a built-in feature of React returns a handler function that manages the state variable invoked on returns an array of 2 elements
a React hook enables you to manage data, which, when updated, tells React to update the UI accordingly. returns an array of 2 elements
The size of JavaScript arrays can be empty is constant and cannot be changed once declared can be changed dynamically a and b a and c
a and c
Which is a valid arrow syntax for the following function: function myfn (a) { return a * a; } (a) => { return a * a; } (a) => a * a; a => a * a; a and b a, b and c none are valid
a, b and c
Which of the following are valid JavaScript arrays: const years = [1855, 1648, 1420]; const days = ["Monday", "Tuesday", "Wednesday"] const mix = [1855, "1855", 1648, "1648"] const mess = [1420, "Monday", 1648, false] a and b a, b and c a, b, c and d
a, b, c and d
Full addresses to the destination page/link. absolute URL relative URL destination URL sync path
absolute URL
This attribute specifies the action to be performed after a form is submitted. action method task source
action
The JavaScript output that requires user interaction: alert write console.log document.write
alert
In HTML, a numbered list is coded with a ul element that contains li elements an ol element that contains li elements an li element that contains ul elements an li element that contains ol elements
an ol element that contains li elements
How do you create hyperlinks in HTML? anchor tag hyper tag link tag underline tag
anchor tag
html tags are always found in pairs are enclosed in <> are used to define or label the key elements of a web page are usually found in pairs
are enclosed in <> are used to define or label the key elements of a web page are usually found in pairs
part of the html tag used to specify additional style or information about the html tag, sources attributes meta items
attributes
Which type of element is displayed on a new line? all types inline block semantic
block
___________ level elements always start on a new line with some space before and after the element, always takes up the full width available. outline inline block semantic
block
The HTML element that contains content displayed in the browser: section element body element main element div element
body element
Which CSS snippet would set the border radius for a div element as shown in this screenshot? *box with top right and bottom left corners rounded* border-radius: 20px; border-radius: 0 20px 10px; border-radius: 30px 10px 20px 10px; border-radius: 10px 100px;
border-radius: 10px 100px;
JavaScript is read and interpreted by the JavaScript compiler browsers java runtime environment script editors
browsers
How do you implement asynchronous coding in JavaScript? callbacks and promises promises and async / await props and state callbacks, promises, and async / await
callbacks, promises, and async / await
The name of the special prop in React used to pass the data enclosed within the parent's opening and closing tag. property state children propsContent
children
In CSS which selectors allow you to target multiple elements on the page? ids classes RFDs properties
classes
What does the term 'Separation of Concerns' allow in React? efficient page refresh components sharing css for consistency in user interface components combine html, css and javascript in single element none of the above
components combine html, css and javascript in single element
let numbers = [4,5,3,2,7,8,9,0] How do you select all the numbers less than or equal to 3? const ans = numbers.map(n <= 3) const ans = numbers.map(n => n <= 3) const ans = numbers.filter(n <= 3) const ans = numbers.filter(n => n <= 3)
const ans = numbers.filter(n => n <= 3)
const prices = [45, 90, 20] How do we add a $5.4 charge on every price to produce a new array like [50.4, 95.4, 25.4] const newArray = prices.map(p=> p + 5.4) const newArray = prices.map(prices[] + 5.4) const newArray = prices.filter(p=> p + 5.4) const newArray = prices.reduce(price + 5.4);
const newArray = prices.map(p=> p + 5.4)
Which of the following are true of React components: contain their own logic and appearance can be as small as a button or as large as an entire page JavaScript functions that return markup part of the user interface
contain their own logic and appearance can be as small as a button or as large as an entire page JavaScript functions that return markup part of the user interface
The approach used in React where the developer describes the target UI state(s) and lets React figure out how to get there. The developer can skip the overhead of selecting DOM elements and changing them manually. SPA intuitive imperative declarative
declarative
The following <a> element <a href="update.html">Update</a> displays "Update" as a link to update.html displays "update.html" as an attribute of Update displays "update" as plain text displays "update.html" as plain tex
displays "Update" as a link to update.html
Which method will look through the document and return an element with id myId. get_element.id(myId); id = myId;get_element_id(id); document.getElementById("myId"); document.get(id:myId);
document.getElementById("myId");
Inline elements: always starts on a new line does not start on a new line takes the full width of the container takes the full width of the page only takes up as much width to hold the element
does not start on a new line only takes up as much width to hold the element
Which of the following are css selectors? element class tag id
element class id
A web page is made up of multiple html ________. elements contracts phases sections
elements
The JavaScript runtime model in which the browser handles tasks in the background before being put on the call stack: worker threads event loop keyframes synchronous events
event loop
Which positioning would you use to keep an element from scrolling off the page? static relative absolute fixed
fixed
Used to collect data from users on a webpage: entry input_el drop_box form
form
Which css grid property establishes a 3 equal column layout? columns: .33 .33 .33 row: 3 3 3 grid-template-columns: 1fr 1fr 1fr child: 1em 1em 1em
grid-template-columns: 1fr 1fr 1fr
What attribute is used to specify the link address in an anchor tag? attr addr href src
href
_______ elements do not start on a new line. They only take up as much width as necessary. outline inline block semantic
inline
Which of the following CSS selects all links that are nested inside a list item? ul .a {...} a:hover ul.li {...} a:link list-item {...} li a {....}
li a {....}
What is the process to share state between components when props can only be passed down? state share children props set state lifting state up
lifting state up
Although for loops are not allowed in React components, we can iterate through a group of elements with: forEvery( ) iter( ) map( ) jsloop( )
map( )
To horizontally center block elements use: padding-left-right: auto padding: auto margin: 0 auto block: center
margin: 0 auto
Allow us to modify styling and layout based on screen width: media queries device queries media selector view selector
media queries
_______ allow us to modify our styles depending on parameters like width of the window or device type. view options media queries classes selectors
media queries
A JavaScript runtime that executes code outside of the browser. node.js jsRun codelens code assist
node.js
All elements within an HTML document are: nodes tags attributes types
nodes
Node.js uses a ____________ architecture. (Check all that apply.) Select 3 correct answer(s) nonblocking blocking synchronous asynchronous single-thread multle-threaded
nonblocking asynchronous single-thread
JavaScript functions are ____________. objects classes primitives constructors
objects
Which of the following are block elements? links images paragraphs headers lists
paragraphs headers lists
To implement proper updating of state that is based on previous state: pass a function to the updating function that accepts at least one parameter to the updating function use the usePrevState React hook use the PREV component wrapper accept the previous value from the useState() function and pass that value to useState()
pass a function to the updating function that accepts at least one parameter to the updating function
Which of the following are states of a Promise object? sent success pending fetch fulfilled rejected
pending fulfilled rejected
When async is placed before a function, it always returns a ____________ javascript object promise function hook
promise
Listening to changes in the page path to update the DOM, creating a multi-page feeling can be accomplished with: MPA react-router mongoose SPA
react-router
React's process for determining which changes need to be made to keep everything updated is called: resolution reconciliation discernment settle
reconciliation
a link address described as a relation to the present directory absolute URL relative URL destination URL sync path
relative URL
With express, we have access to two object parameters, _________ and _________ . send and receive request and response get and put get and post
request and response
What are two possible outcomes of a promise? resolve or reject sync or async accept or deny block or nonblock
resolve or reject
A web design approach that creates dynamic changes to the appearance of a website based on the screen size of the device used to view it. search engine optimization cross-browser compatibility user accessibility responsive web design
responsive web design
What is true about React components? return a valid React element return a handler function begin with an uppercase letter are javascript functions
return a valid React element begin with an uppercase letter are javascript functions
When a browser makes a request for a static web page, the web server returns the HTML for the page and the browser renders it renders the HTML for the page and returns it to the browser generates the HTML for the page and returns it to the browser finds the HTML for the page and renders it
returns the HTML for the page and the browser renders it
Express is a popular node.js module that lets you parse incoming requests and match those requests to particular ________ or URLs. paths routes threads nodes
routes
The endpoints of a server that determine the way an application responds to a client request. nodes routes paths components
routes
Because applications like Google and Bing rank the pages of a website, a web developer needs to be concerned with search engine optimization cross-browser compatibility user accessibility responsive web design
search engine optimization
What is true about declaring my shopping cart this way in React? function ShoppingCart() { const [cart, setCart] = useState([]); Select 3 correct answer(s) initializes my cart with a default item setCart will update my cart state my cart will automatically update on a change in items refresh of the page is not necessary to update my cart
setCart will update my cart state my cart will automatically update on a change in items refresh of the page is not necessary to update my cart
What is the purpose of the alt attribute in the img tag? specify an alternate address for accessing the image specify an alternate image if the image is not found specify an alternate path to the image specify an alternate text for an image that is required for screen readers
specify an alternate text for an image that is required for screen readers
React rerenders on: browser signals state change change in data component trigger
state change
What attribute can set an HTML link to open in a new window vs the same window? target attr src href
target
In the following React, what is setCount? const [count, setCount] = useState(0); const [count, setCount] = useState(0); the initializing function the update function the callback function the component function
the update function
How do you chain subsequent methods using promises? async await then resolve
then
A React hook that gives us a way to establish a global state across components. For example, a login session. useSession setSession useContext setGlobal
useContext
To avoid the slow process of updating the DOM, React uses a _________ to render elements based on state changes. render cache virtual DOM document tree render queue
virtual DOM
To process javascript within a React component, use: < code here /> < > code here < /> { code here } <div> code here </div>
{ code here }
