Yordevs Quiz Night 2023

We bid you welcome to the final Yordevs event of the term, where you'll put your web development and programming skills to the test for a chance to win a voucher!

As a quiz participant you will get free pizza! Please fill out the Google Form here, if you haven't already. The Yordevs AGM will also follow this event! You can nominate yourself beforehand here.

You can work individually or in a group. Choose one of the four answers for every question. You have three quarters of an hour to answer them all. Email your answers to yordevs@yusu.org by 6:35pm to qualify for the prizes! Answers will be revealed at 6:40pm. Prizes will be awarded via email to a member of every winning team following the event, and it will be their responsibility to split the prize amongst their team.

If you're really stuck, ask us for a quick nudge.¹ Good luck!

Questions

Which is a valid HTML tag?
- <h0>
- <h10>
- <h6>
- <heading>
This is the modal window on the Yordle website. Which of the following HTML elements is this modal window nested in?
- <header>
- <body>
- <footer>
- <iframe>
What is the correct HTML tag for inserting a line break element?
- <br>
- <break>
- <lb>
- \n
Which one of the following statements relating to stylings is untrue?
- The correct HTML for referring to an external style sheet is:
```
<link rel="stylesheet" type="text/css" href="styles.css">
```
- You cannot refer to an external style sheet in the section of a HTML document.
- The style HTML attribute is used to define inline styles.
- The style HTML element is used to define internal styles.
Why does the logo on the YUSU website blur when you zoom in a bit too much?
- The width and height properties were set too high in the <img>.
- The logo is in an XML-based vector graphic of an SVG format.
- The logo is in a PNG image format.
- The style="max-width: 200px" shouldn't make that possible!
Using a screenreader for accessibility testing (e.g Pericles), upon which icon in the Yordevs Website's footer does the screenreader stop working properly?
- Twitter
- GitHub
- Discord
- Instagram
Why does the LinkedIn icon come up as an Unknown Social Media Icon when styling is stripped from the Yordevs website?
- iconName="Link to Yordevs LinkedIn" isn't present
- iconName="Link to Yordevs LinkedIn" is misplaced
- icon={<FaLinkedin/>} isn't present
- icon={<FaLinkedin/>} is misplaced
The following ASCII art is accompanied by which Yordevs welcome in Dev Tools on the Yordevs Website?
- "Hi from Longboi, and the Yordevs team!"
- "Hello from the Yordevs team, and Longboi!"
- "Hi from the Yordevs team, and Longboi!"
- "Hello from Longboi, and the Yordevs team!"
WCAG (Web Content Accessibility Guidelines) are guidelines published by the Web Accessibility Initiative of the World Wide Web Consortium, the main international standards organization for the Internet. Which of the following is the correct WCAG 2.0 guideline on contrast ratios?
- WCAG 2.0 Level AA requires text or images of text to have a contrast ratio of at least 4.5:1 (or 3:1 for large text).
- WCAG 2.0 Level A requires text or images of text to have a contrast ratio of at least 7:1 (or 4.5:1 for large text).
- WCAG 2.0 Level AAA requires text or images of text to have a contrast ratio of at least 4.5:1 (or 3:1 for large text).
- WCAG 2.0 Level AAAA requires text or images of text to have a contrast ratio of at least 7:1 (or 4.5:1 for large text).
Using an accessibility testing tool (e.g WAVE), you can check if any contrast errors are present on a website. Thankfully, there are none on the Yordevs Website - but there is one error. Which of the following WCAG guidelines, is this error not compliant with?
- 4.1.2 Name, Role, Value (Level A)
- 1.1.1 Non-text Content (Level A)
- 3.1.1 Language of Page (Level A)
- 2.4.4 Link Purpose (In Context) (Level A)
Which of these hex codes is part of the Yordevs branding?
- #AA211A
- #2B434C
- #DED45B
- #9D140D
Which event occurs when a user clicks on an HTML element?
- onclick
- onmouseover
- onmouseclick
- onchange

Meet the Yordevs duck's distant cousin. In the following HTML code block containing internal CSS, what hex code represents the colour of the body class?

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
        padding: 0;
        margin: 0;
        background: #FFFFFF;
      }
      .circle {
        position: relative;
        display: block;
        width: 500px;
        height: 500px;
        background: #284049;
        margin: 0 auto;
        border-radius: 50%;
      }
      .beak {
        position: absolute;
        border-top: 100px solid #E85454;
        border-right: 50px solid transparent;
        border-left: 25px solid transparent;
        margin-left: 30px;
        margin-top: 150px;
        transform: rotate(90deg);
      }
      .head {
        position: absolute;
        left: 75px;
        top: 80px;
        background: #F7ED74;
        border-radius: 50%;
        width: 180px;
        height: 180px;
      }
      .body {
        position: absolute;
        left: 75px;
        top: 240px;
        background-color: #F7ED74;
        width: 400px;
        height: 230px;
        border-radius: 30% 70% 50% 30% / 50% 0 100% 50%;
      }
      .wing {
        display: none;
      }
      .red-wing {
        position: absolute;
        border-top: 140px solid #9D140D;
        border-right: 80px solid transparent;
        border-left: 80px solid transparent;
        transform: rotate(150deg);
        margin-left: 150px;
        margin-top: 270px;
      }
      .yellow-wing {
        position: absolute;
        border-top: 140px solid #F7ED74;
        border-right: 80px solid transparent;
        border-left: 80px solid transparent;
        transform: scale(0.75) rotate(150deg);
        margin-left: 140px;
        margin-top: 275px;
      }
      .cursor {
        position: absolute;
        border-top: 30px solid #9D140D;
        border-right: 15px solid transparent;
        border-left: 10px solid transparent;
        transform: rotate(155deg);
        margin-left: 110px;
        margin-top: 130px;
      }
      .cursor-tail {
        position: absolute;
        background-color: #9D140D;
        height: 10px;
        width: 10px;
        transform: rotate(65deg);
        margin-left: 125px;
        margin-top: 155px;
      }
   </style>
</head>
<body>
   <div class="circle">
     <div class="duck">
       <div class="body"></div>
       <div class="beak"></div>
       <div class="head"></div>
       <div class="eye">
         <div class="cursor"></div>
         <div class="cursor-tail"></div>
       </div>
       <div class="wing">
         <div class="red-wing"></div>
         <div class="yellow-wing"></div>
       </div>
     </div>
   </div>
</body>
</html>

#E85454
#284049
#F7ED74
#FFFFFF

Using the same HTML code as the previous question, you may have noticed that our distant cousin is wingless. Which is the smallest change in the code that wings the poor duck?
- Remove display: none; from the wing class styling
- Replace wing by wings in the internal CSS
- Replace red-wing by red-wings in the HTML document body
- Add display: block !important; to both red-wing and yellow-wing class stylings
Going up the Yordevs family tree for a quick history lesson. Who of the following is the oldest of the long lost Yordevs ancestors?²
Which of these statements concerning the HTML alt attribute is false?
- Null alt attributes should only be used for decorative images.
- Alt attributes specify alternative information about an image, which is used if a user cannot view it (e.g. due to a slow connection, an error in the src attribute, or if a screen reader is used).
- The alt attribute is required if the href attribute is present.
- The HTML:
```
<img src="" alt="The Yordevs Duck">yordevs-duck.png</img>
```
  adds a PNG image named yordevs-duck.png with alternative text 'The Yordevs Duck' to a page.
Which HTML tag formats elements as a numbered list?
- <ol>
- <list>
- <dl>
- <ul>

Which is the correct HTML hyperlink?

<a url="http://www.yordevs.com">Yordevs</a> <!-- This one is -->

<a name="http://www.yordevs.com">Yordevs</a> <!-- No, that one is -->

<a>http://www.yordevs.com</a> <!-- Yes, this one is! -->

<a href="http://www.yordevs.com">Yordevs</a> <!-- No, this is -->

What message is displayed on the Yordevs Links page if the source is specified as a QR code?³
- "If you can scan a qr code you can make a website, why not use these links to find out more about us"
- "You've come from a qr code? Why not join us and find out how we knew!"
- "You clicked our link on a qr code? I didn't even know you could do that!"
- "This link was shared via a qr code? Good job I wrote the code for this message then!"
What backend does this Contact Us form on the Yordevs Website use?
- Formbold
- Formcake
- Formspree
- Formspark
The HTML code for the textarea of the Contact Us form in the previous question is as follows:
```
<textarea cols="30" rows="5" placeholder="Your message here..." name="textarea" id="message"
          class="ContactForm__FormInput" style="resize: vertical; max-width: 100%;">
</textarea>
```
Is this textarea an accessible HTML element?
- Yes, as placeholder and name are specified.
- Yes, as name and class are specified.
- No, as tab-index and label are not specified.
- No, as label and aria-label are not specified.

Which HTML opens a link in a new browser window?

```
<a href="url" new>
```
```
<a href="url" target="_blank">
```
```
<a href="url" target="new">
```
```
<a href="url" target="blank">
```

Where on the whole wide web can you find this?
- The Lemon Press website
- The Longboi Locator website
- The Ebor Lex Journal website
- The Yordle website
How many ducks are present on the Yordevs Links page?
- 170
- 180
- 200
- 150
Which of the following statements about the <script> HTML element is false?
- External JavaScript files must contain the <script> tag.
- JavaScript, enclosed by <script> tags, can be present in both the <head> and <body> sections of a HTML document.
- <script src="index.js"> is the correct syntax for referring to an external script in a file called index.js.
- JavaScript is put in the <script> HTML element.
What HTTP request method gets you rick rolled on the Yordle Server?
- DELETE
- POST
- PUT
- GET
What HTTP status code (although slightly misleadingly) is accompanied by this response on the Yordle Server upon an POST request with an invalid body?
- 403
- 200
- 400
- 402
Which is the correct HTML tag to enclose important text
- <important>
- <strong>
- <b>
- <i>
Which of these would enable you to select all p elements inside div elements in CSS?
- div + p
- p -> div
- div p
- div.p
What is the purpose of meta tags?
- To only store information about browsers.
- To store data relevant to web browsers and search engines.
- To only store information about search engines.
- To only store information about users.

Which of the following HTMLs will provide a valid and untruncated meta description?

<head>
    <meta name="description" content="This is an example of a
meta description. This will often show up in search results.">
</head>

<body>
    <meta name="description" content="This is another example of a
meta description. This may or may not show up in search results.">
</body>

<body>
    <meta name="description" content="This is yet another example of a
meta description. Meta descriptions should be under 160 characters as 
any characters over may be truncated by search engines like Google.">
</body>

<head>
    <meta name="description" content="This is but another example of a
meta description. Neither meta descriptions nor meta keywords factor 
into Google's ranking algorithms for web search.">
</head>

Why is the SERP (Search Engine Results Page) snippet different from the meta description declared in the HTML for the Yordevs NextJS Tutorial?
```
<meta data-react-helmet="true" name="description" content="The official website for Yordevs, the University 
                                                           of York's Web Development society!">
```
- Search engines overrule meta descriptions of pages when they detect a lot of relevance between the existing meta description of a result page and a user search query. Instead they use other snippets from the page that may be less relevant.
- Search engines overrule meta descriptions of pages when they detect little relevance between the existing meta description of a result page and a user search query. Instead they use other snippets from the page that may be more relevant.
- Search engines change the meta descriptions of pages when they detect little relevance between the existing meta description of a result page and a user search query. Instead they use other snippets from the page that may be more relevant.
- Search engines change the meta descriptions of pages when they detect a lot of relevance between the existing meta description of a result page and a user search query. Instead they use other snippets from the page that may be more relevant.
SEO (Search Engine Optimisation) work aims to improve website traffic to a website via search engines by improving the page rank (position in search rankings). Which of the following statements about SEO is false?
- Offpage SEO measures are applied outside of a website. Tactics include link building, guest posting and social media marketing. Offpage SEO aims to build your website's reputation and credibility.
- Onpage SEO tactics are applied directly within a website. Examples include measures to optimise the content or improve the meta description and title tags.
- White hat SEO strategies exclude link building, quality content creation, improving website performance, using descriptive meta tags, improving site navigation and utilising responsive web design.
- Black hat SEO techniques are unethical (but not illegal) SEO practices that clash with search engine guidelines and often result in penalties from search engines. Examples include keyword stuffing, cloaking, blog commenting, user-generated content spamming, using private link networks and even hacking.
What HTML form input presents multiple options, but allows the selection of only one?
- <input type="text">
- <input type="radio">
- <input type="checkbox">
- <textarea>

What is the correct JavaScript syntax to change the content of the HTML element below?

<p id="hello">Hello World!</p>

```
#hello.innerHTML = "Hello Yordevs!";
```

document.getElementByName("p").innerHTML = "Hello Yordevs!";

document.getElementById("hello").innerHTML = "Hello Yordevs!";

document.getElement("p").innerHTML = "Hello Yordevs!";

Which of these are valid HTML?

<h1> Yordevs Quiz Night 2023
<h2> Questions

</h1> Yordevs Quiz Night 2023<h1>
</h2> Questions<h1>

<h1>Yordevs Quiz Night 2023</h1>
<h2>Questions</h2>

<h1>Yordevs Quiz Night 2023<h1>
<h2>Questions<h2>

What is the correct HTML for making a checkbox?
- <check>
- <checkbox>
- <input type="check">
- <input type="checkbox">
This is the Yordevs website's nav bar. What HTML tag should enclose the elements of the nav bar?
- <navbar>
- <section>
- None, as they are enclosed by <header>
- <nav>
When you hover over an item on the Yordevs nav bar, the change is very visual. Which of the following is not a valid reason, according to the WCAG 2.0 guidelines, for this?
- A change in text decoration (usually an underline) upon mouse hover and keyboard focus is sufficient enough to indicate a hyperlink, as users are accustomed to seeing links underlined.
- A change in colour upon mouse hover and keyboard focus is sufficient enough to indicate a hyperlink, even if some users have low vision, color deficiency, or page color overrides.
- Links should look like links, and nothing else should.
- Alternative visual mouse hover effects (such as background glows, drop shadows, color changes) for navigation links can help users know that an element is clickable.
Keyboard users utilise the tab and shift-tab keys to navigate through interactive web page elements. Visual indication of the element with current keyboard focus, called a focus indicator, is thus useful for sighted keyboard users. An example of a focus indicator on the button link to the Yordevs Website from the Yordevs Links page is shown. To ensure the same visual presentation is available upon both mouse hover or keyboard focus, any time a:hover is adjusted in CSS, a:focus should be too. Which of the following elements on the Yordevs website does not provide focus indication?
Which of these is the biggest setback for keyboard users when navigating the Yordevs website when zoomed in at 125%+ or on a smaller viewport?
- The burger menu is not keyboard focusable.
- There is no focus indicator on the Yordevs logo.
- There is no focus indicator on the Blogs navigation link.
- The tab order is awesome!
What are <div> tags used for in a HTML document?
- To replace paragraphs (i.e. <p> tags).
- To create hyperlinks.
- To logically divide the document.
- To create space between sections of a document.

What is the correct JavaScript syntax for opening a new window called "yd" ?

yd = window.open("https://yordevs.com/");

yd = open.window("https://yordevs.com/");

yd = new.window("https://yordevs.com/");

yd = window.open("https://yordevs.com/");

Which HTML attribute is used to specify that an form element input field has to be filled out?
- formvalidate
- validate
- required
- placeholder

What is the output on the console after running the following JavaScript code containing regex?

const input = "Remember then to send this tonight!";

const find = /.*(?:r\s)(.*)(?:n\s)(?:.*)(?:\ss)(.*)(?:\sth)(.*)(?:\sto)(?:([^t]*)(?:t)([^t]*))*/;
const replace = "$1 $2 $3 $4$5";

console.log(input.replace(find, replace));

to end this night!
the end is nigh!
then send this!
hen night to remember!

Conclusion

Aaaand you're done - phew! Congratulations on getting here. Just remember to send your answers in an email off to yordevs@yusu.org!

Footnotes

Hint: you may find inspecting the Yordevs website and the Yordevs Links page, scouring Yordevs GitHub or utilising CodePen useful for some of these questions. ↩
Hint: They were crafted using only CSS! ↩
Hint: Check out URL query strings and parameters! ↩

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Questions.md

Questions.md

Yordevs Quiz Night 2023

Questions

Conclusion

Files

Questions.md

Latest commit

History

Questions.md

File metadata and controls

Yordevs Quiz Night 2023

Questions

Conclusion

Footnotes