Instantly share code, notes, and snippets.

# jonathantneal/QUIZ.md

Last active August 7, 2022 14:24
Show Gist options
• Save jonathantneal/44bff56136498db93e923d578530fa50 to your computer and use it in GitHub Desktop.
So You Think You Know Astro Quiz

# So You Think You Know Astro

Ahoy, me celestial companions of coding! It be me, your humble gentlenaut of fortune, Cosmo, at ye service.

( An’ perhaps to some snooty static site scallywags an Ex-Sailor of the Astro Expanse... )

So, y’ think ye know Astro, do ye? Aye, then consider this cosmic challenge from ye ol’ quainty matey, Cosmo.

But be warned! This be a quiz only for those who claim or wish to be experts in the syntax of Astro.

( An' then any all else who 'as too much time on their 'ands... )

## What Does That Tag Do?

### The Lowercase X

```---
const x = 'b'
---
<x>hi</x>```
• A.: `<x>hi</x>`
• B.: `<b>hi</b>`
• C.: `<x>hix>`
• D.: It throws.

### The Uppercase X

```---
const X = 'b'
---
<X>hi</X>```
• A.: `<X>hi</X>`
• B.: `<b>hi</b>`
• C.: `<X>hiX>`
• D.: It throws.

### The X Object

```---
const X = { Y: 'b' }
---
<X.Y>hi</X.Y>```
• A.: `<X.Y>hi</X.Y>`
• B.: `<b>hi</b>`
• C.: `<X.Y>hiX.Y>`
• D.: It throws.

### The JavaScript Underscore

```---
const _ = 'b'
---
<_>hi</_>```
• A.: `<_>hi</_>`
• B.: `<b>hi</b>`
• C.: `<_>test_>`
• D.: It throws.

### The JavaScript Dollar

```---
const \$ = 'b'
---
<\$>hi</\$>```
• A.: `<\$>hi</\$>`
• B.: `<b>hi</b>`
• C.: `<\$>hi\$>`
• D.: It throws.

### The Dollar Object

```---
const \$ = { Y: 'b' }
---
<\$.Y>hi</\$.Y>```
• A.: `<\$.Y>hi</\$.Y>`
• B.: `<b>hi</b>`
• C.: `<\$.Y>hi\$.Y>`
• D.: It throws.

Back to the top

## What Does That Attribute Do?

### The Aria-Hidden Attribute

`<b aria-hidden>hi</b>`
• A.: `<b aria-hidden>hi</b>`
• B.: `<b aria-hidden=true>hi</b>`
• C.: `<b aria-hidden="true">hi</b>`
• D.: It throws.

### The Aria-Hidden Attribute ala Component

```---
// ../components/Bold.astro
---
<b {...Astro.props}><slot /></b>```
```---
import Bold from '../components/Bold.astro'
---
<Bold aria-hidden>hi</Bold>```
• A.: `<b aria-hidden>hi</b>`
• B.: `<b aria-hidden="true">hi</b>`
• C.: `<b aria-hidden=true>hi</b>`
• D.: It throws.

### The Aria-Hidden Boolean Attribute

`<b aria-hidden={true}>hi</b>`
• A.: `<b aria-hidden>hi</b>`
• B.: `<b aria-hidden="true">hi</b>`
• C.: `<b aria-hidden=true>hi</b>`
• D.: It throws.

### The Aria-Hidden Boolean Attribute ala Component

```---
// ../components/Bold.astro
---
<b {...Astro.props}><slot /></b>```
```---
import Bold from '../components/Bold.astro'
---
<Bold aria-hidden={true}>hi</Bold>```
• A.: `<b aria-hidden>hi</b>`
• B.: `<b aria-hidden="true">hi</b>`
• C.: `<b aria-hidden=true>hi</b>`
• D.: It throws.

### The Aria-Hidden Boolean False Attribute

`<b aria-hidden={false}>hi</b>`
• A.: `<b>hi</b>`
• B.: `<b aria-hidden="false">hi</b>`
• C.: `<b aria-hidden=false>hi</b>`
• D.: It throws.

### The Aria-Hidden Boolean False Attribute ala Component

```---
// ../components/Bold.astro
---
<b {...Astro.props}><slot /></b>```
```---
import Bold from '../components/Bold.astro'
---
<Bold aria-hidden={false}>hi</Bold>```
• A.: `<b>hi</b>`
• B.: `<b aria-hidden="false">hi</b>`
• C.: `<b aria-hidden=false>hi</b>`
• D.: It throws.

### The Aria-Hidden Empty String Attribute

`<b aria-hidden="">hi</b>`
• A.: `<b aria-hidden>hi</b>`
• B.: `<b aria-hidden="">hi</b>`
• C.: `<b aria-hidden="true">hi</b>`
• D.: `<b aria-hidden=true>hi</b>`
• E.: It throws.

### The Aria-Hidden Empty String ala Component

```---
// ../components/Bold.astro
---
<b {...Astro.props}><slot /></b>```
```---
import Bold from '../components/Bold.astro'
---
<Bold aria-hidden="">hi</Bold>```
• A.: `<b aria-hidden>hi</b>`
• B.: `<b aria-hidden="">hi</b>`
• C.: `<b aria-hidden="true">hi</b>`
• D.: `<b aria-hidden=true>hi</b>`
• E.: It throws.

### The Single Quote Quoted Attribute

`<b quote='"oh"'>hi</b>`
• A.: `<b quote='"oh"'>hi</b>`
• B.: `<b quote="'oh'">hi</b>`
• C.: `<b quote='&quot;oh&quot;'>hi</b>`
• D.: `<b quote='&#34;oh&#34;'>hi</b>`
• E.: It throws.

### The Double Quote Quoted Attribute

`<b quote="'oh'">hi</b>`
• A.: `<b quote='"oh"'>hi</b>`
• B.: `<b quote="'oh'">hi</b>`
• C.: `<b quote='&apos;oh&apos;'>hi</b>`
• D.: `<b quote='&#34;oh&#34;'>hi</b>`
• E.: It throws.

Back to the top

## What Does That Attribute Expression Do?

### The Cool Variable

```---
const cool = 'cool'
---
<b {cool}>hi</b>```
• A.: `<b {cool}>hi</b>`
• B.: `<b cool="cool">hi</b>`
• C.: `<b cool="[string String]">hi</b>`
• D.: It throws.

### The Cool Object

```---
const cool = { be: 'cool' }
---
<b {cool}>hi</b>```
• A.: `<b {cool}>hi</b>`
• B.: `<b cool="{&#34;be&#34;:&#34;cool&#34;}">hi</b>`
• C.: `<b cool="[object Object]">hi</b>`
• D.: It throws.

### The Cool Object with a JSON To-String

```---
const cool = {
be: 'cool',
toString() {
return JSON.stringify(this)
}
}
---
<b {cool}>hi</b>```
• A.: `<b {cool}>hi</b>`
• B.: `<b cool="{&#34;be&#34;:&#34;cool&#34;}">hi</b>`
• C.: `<b cool="[object Object]">hi</b>`
• D.: It throws.

### The Cool Object with a Custom To-String

```---
const cool = {
be: 'cool',
toString() {
return 'be="excellent" to="each other"'
}
}
---
<b {cool}>hi</b>```
• A.: `<b {cool}>hi</b>`
• B.: `<b cool="{&quot;be&quot;:&quot;cool&quot;}">hi</b>`
• C.: `<b cool="{&#34;be&#34;:&#34;cool&#34;}">hi</b>`
• D.: `<b cool="be=&quot;excellent&quot; to=&quot;each other&quot;">hi</b>`
• E.: `<b cool="be=&#34;excellent&#34; to=&#34;each other&#34;">hi</b>`
• F.: `<b be="excellent" to="each other">hi</b>`
• G.: `<b cool="[object Object]">hi</b>`
• H.: It throws.

### The Cool Function

```---
const cool = () => 'runnings'
---
<b {cool}>hi</b>```
• A.: `<b {cool}>hi</b>`
• B.: `<b cool="runnings">hi</b>`
• C.: `<b cool="() => &quot;runnings&quot;">hi</b>`
• D.: `<b cool="() => &#34;runnings&#34;">hi</b>`
• E.: `<b cool="[function Function]">hi</b>`
• F.: It throws.

### The Cool Running Function

```---
const cool = () => 'cool=cool'
---
<b {cool()}>hi</b>```
• A.: `<b {cool()}>hi</b>`
• B.: `<b cool="cool">hi</b>`
• C.: `<b cool="cool=cool">hi</b>`
• D.: `<b cool="cool=&quot;cool&quot;">hi</b>`
• E.: `<b cool="cool=&#34;cool&#34;">hi</b>`
• F.: `<b cool()="cool">hi</b>`
• G.: `<b cool()="cool=cool">hi</b>`
• H.: `<b cool()="&quot;cool&quot;">hi</b>`
• I.: `<b cool()="&#34;cool&#34;">hi</b>`
• J.: `<b cool="[function Function]">hi</b>`
• K.: It throws.

### Cantankerous Cosmo’s Too Cool Combo

```---
const cool = () => ({
cool: 'cool',
toString() {
return 'cool=cool'
}
})
---
<b {cool()}>hi</b>```
• A.: `<b {cool()}>hi</b>`
• B.: `<b cool="cool">hi</b>`
• C.: `<b cool="cool=cool">hi</b>`
• D.: `<b cool="cool=&quot;cool&quot;">hi</b>`
• E.: `<b cool="cool=&#34;cool&#34;">hi</b>`
• F.: `<b cool()="cool">hi</b>`
• G.: `<b cool()="cool=cool">hi</b>`
• H.: `<b cool()="&quot;cool&quot;">hi</b>`
• I.: `<b cool()="&#34;cool&#34;">hi</b>`
• J.: `<b cool="[function Function]">hi</b>`
• K.: It throws.

Back to the top