---
id: 62a23c1d505bfa13747c8a9b
title: Step 4
challengeType: 0
dashedName: step-4
---

# --description--

قم بتغليف الأرقام `0`, و `100`, و `50` في عناصر `span`. ثمَّ غلف العناصر `span` الجديدة في عناصر `strong`. Then give your new `span` elements `id` values of `xpText`, `healthText`, and `goldText`, respectively.

# --hints--

You should add a `strong` element in your first `.stat` element.

```js
const stat = document.querySelectorAll('.stat')[0];
const strong = stat?.querySelector('strong');
assert.exists(strong);
```

Your first new `strong` element should have a `span` element.

```js
const stat = document.querySelectorAll('.stat')[0];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.exists(span);
```

Your first nested `span` element should have the `id` of `xpText`.

```js
const stat = document.querySelectorAll('.stat')[0];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.equal(span?.id, 'xpText');
```

Your first `span` element should be wrapped around the text `0`.

```js
const stat = document.querySelectorAll('.stat')[0];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.equal(span.innerText, '0');
```

The text of your first `.stat` element should still be `XP: 0`.

```js
const stat = document.querySelectorAll('.stat')[0];
assert.equal(stat.innerText, 'XP: 0');
```

You should add a `strong` element in your second `.stat` element.

```js
const stat = document.querySelectorAll('.stat')[1];
const strong = stat?.querySelector('strong');
assert.exists(strong);
```

Your second new `strong` element should have a `span` element.

```js
const stat = document.querySelectorAll('.stat')[1];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.exists(span);
```

Your second nested `span` element should have the `id` of `healthText`.

```js
const stat = document.querySelectorAll('.stat')[1];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.equal(span?.id, 'healthText');
```

Your second `span` element should be wrapped around the text `100`.

```js
const stat = document.querySelectorAll('.stat')[1];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.equal(span.innerText, '100');
```

The text of your second `.stat` element should still be `Health: 100`.

```js
const stat = document.querySelectorAll('.stat')[1];
assert.equal(stat.innerText, 'Health: 100');
```

You should add a `strong` element in your third `.stat` element.

```js
const stat = document.querySelectorAll('.stat')[2];
const strong = stat?.querySelector('strong');
assert.exists(strong);
```

Your third new `strong` element should have a `span` element.

```js
const stat = document.querySelectorAll('.stat')[2];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.exists(span);
```

Your third nested `span` element should have the `id` of `goldText`.

```js
const stat = document.querySelectorAll('.stat')[2];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.equal(span?.id, 'goldText');
```

Your third `span` element should be wrapped around the text `50`.

```js
const stat = document.querySelectorAll('.stat')[2];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.equal(span.innerText, '50');
```

The text of your third `.stat` element should still be `Gold: 50`.

```js
const stat = document.querySelectorAll('.stat')[2];
assert.equal(stat.innerText, 'Gold: 50');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./styles.css">
    <title>RPG - Dragon Repeller</title>
</head>
<body>
    <div id="game">
        <div id="stats">
--fcc-editable-region--
            <span class="stat">XP: 0</span>
            <span class="stat">Health: 100</span>
            <span class="stat">Gold: 50</span>
--fcc-editable-region--
        </div>
        <div id="controls"></div>
        <div id="monsterStats"></div>
        <div id="text"></div>
    </div>
</body>
</html>
```
