Advanced Placement Exam – User Interface Development

Step 1 of 5

20%

Student Name*
First Last
Parent Name*
First Last
Parent Email*
Parent Phone*

1. Write down the HTML code to create the following Multiple choice question. Make sure we can only select one option at a time.

2. Which of the following is the correct way to get a selected value from the list of radio inputs with a common name, answer?*

```
$('input[name="answer"]').val();
```

$('input[name="answer"]:checked').val();

```
$('answer:checked').val();
```
```
$('input[answer]:checked').val();
```

3. Which tag is used to add a text box?*
- ```
<input>
```
- ```
<text>
```
- ```
<textbox>
```
- None of the options
4. Which input type makes sure that the input value matches the pattern of an email?*
- ```
text
```
- ```
email
```
- ```
submit
```
- None of the options
5. Which input type adds a submit button inside the form?*
- ```
submit
```
- ```
button
```
- ```
next
```
- None of the options

6. Create a form that has fields like Name, Age, Email, Address. It must have a submit button and following validations:*

a) No field can be empty.
b) The age must be in numbers.
c) Email must match the pattern of an email.
d) The address must have a minimum length of 5 characters and a 
maximum length of 20 characters.

7. Write the CSS code to change the text color to red when the value in email input doesn't match the pattern of an email.*

8. Write the code to add two input fields and a button. On button click, it should:*

- Get the numeric value from both inputs.
- Save both values in separate variables. 
- Show a popup with the sum of both values.

9. Which JQuery function can be used to add some HTML code dynamically from javascript?*
- ```
add()
```
- ```
append()
```
- ```
code()
```
- ```
tag()
```
10. What value is being saved in a variable named text in the following code?*
```
var name = "Codewizards";
var text = `We are ${name}`;
```
- We are ${name}
- We are Codewizards
- We are
- We are name

11. Which CSS property has the following values as shown in the image below?*
- ```
justify-content
```
- ```
display
```
- ```
flex-grow
```
- ```
position
```
12. Which of the following timing functions calls a function repeatedly after a specific time interval?*
- ```
clearInterval()
```
- ```
clearTimeout()
```
- ```
setTimeout()
```
- ```
setInterval()
```
13. Which html tag can we use to add a dropdown list of items?*
- ```
select
```
- ```
dropdown
```
- ```
input
```
- None of the options
14. Write the HTML code to create an input form with fields like Name, Age Address. Add appropriate placeholders for each input field.*
15. Write the javascript code to repeatedly call a function named jump after every 10 seconds.*
16. Which of the following is a keyboard event in jquery?*
- ```
keypress
```
- ```
keyup
```
- ```
keydown
```
- All of the options
17. Write the code to call a function named jump when we press the keyboard key arrow up.*
18. Write the code to get a show a random number between 1 and 17 inside a popup. Make sure the random number is an integer and not a decimal.*
19. Which of the following functions is used to delete an element from an array?*
- ```
delete()
```
- ```
splice()
```
- ```
add()
```
- None of the options
20. Write the javascript code to scramble the word "Penguin" in any random order.*

21. What will be the value in the check variable inside the following code?*
```
var animals = ['dog', 'cat', 'tiger', 'wolf'];
var check = animals.includes('lion');
```
- true
- false
- null
- lion
22. Write the CSS code to animate the change in width of an img tag for a duration of 5 seconds.*
23. Which of the following is the correct code to turn off all existing events on a div with class penguin?*
- ```
$('.penguin').disable();
```
- ```
$('.penguin').off();
```
- ```
$('.penguin').unlink();
```
- ```
$('.penguin').events(false);
```

24. Find & fix the syntax error(s) in the following keyframes:*

#keyframes someName{
   0px { width: 231px; }
   from { width: 330px; }
}

25. There are two ways to define keyframes. Use any method to write down keyframe code for animation where an image moves from right: 0px to right: 200px*

26. Complete the following sentence:*

The website that adapts to the screen size of the device 
and changes its appearance accordingly is called a ____________

Responsive website
Dynamic website
Website
Multiphase website

27. Write the HTML code to add a link that scrolls to a div with id "about" of the same page.*

28. To make the media queries work, we use a meta tag inside the head tag. Which of the following is the correct syntax of that meta tag.*

<meta name='viewport' content='width=device-width, initial-scale=1>

<meta name='responsive' content='device-width=width, initial-scale=1'>

<meta name='viewport' content='width=100%, initial-scale=1'>

<meta name='viewport' content='media queries'>

29. Write the css code to change the style of body tag as following*

1. If the screen size is less than 400px, change the background
color to blue.
2. If the screen size is greater than 400 px but less than 600px, 
change the background color to red.
3. If the screen size is greater than 600px but less than 800px, 
change the background color to green.
4. If the screen size is greater than 800px, change the background 
color to yellow.

30. There are two types of list in HTML; ordered list and unordered list. Write the code to add the following items in both list styles.*
```
- Eggs
- Bread
- Milk
- Cake
```

31. Write the CSS code to change the text color of an ordered list to red when the mouse is hovered over it.*
32. Which function is used to convert a string to a number?*
- ```
parseInt()
```
- ```
parseString()
```
- ```
int()
```
- ```
toInt()
```

33. Write the code to create an array with following items "Cat", "Dog", "Lion", "Penguin"*

a) Add two more animals of your choice in the above array.
b) Delete Penguin from the above array

34. Which of the following is not a valid value for CSS property flex-direction?*
- Horizontal
- Row
- Column
35. Write the jquery code to add a class active to a button with id loginButton*

36. Find and fix the syntax error(s) in the following code*

fucntion jump() 
    var power = $('#powerInput').val;
    var jumpHTML = "<img src="jump2.png">
                    <p>{power}</p>";
    $('.container').html(jumpHTML;
    $('.container').css('backgroundcolor', '#0984e3'); 
}
$('button').click(jump);

37. Write the code to get the value with key electric in the following cars object.*

var cars = {
    'luxurious':'Mercedes Benz',
    'sports':'Ferrari',
    'electric':'Tesla',
    'spacious':'Audi'
}

38. Write the code to get all the keys in an array like ['luxurious', 'sports', 'electric', 'spacious'] from cars object*
```
var cars = {
    'luxurious':'Mercedes Benz',
    'sports':'Ferrari',
    'electric':'Tesla',
    'spacious':'Audi'
}
```

39. Which of the following is a correct way to get an array of words ["We", "are", "codewizards"] from the sentence "We are codewizards"?*

var inputString = "We are codewizards"; 
var sentenceArray = inputString.split(" ");

var inputString = "We are codewizards"; 
var sentenceArray = inputString.fetch(" ");

var inputString = "We are codewizards"; 
var sentenceArray = inputString.array();

var inputString = "We are codewizards"; 
var sentenceArray = inputString.split("/n");

40. Complete the code in answer of above question 39 to calculate the length of sentenceArray.*