QCM HTML5/CSS3/JS

1- On souhaite créer des composants similaires à ceux de BOOTSTRAP, Compléter le code

CSS pour produire l’effet visuel suivant sur le bouton de classe btn : « 2pts »

Action Code CSS

Avant le survol de la souris :
Après survol de la souris :
.btn {
background-color: white;
color: green;
border-radius: 5%;
height: 40px;
border: 1px solid green;
}
……………………………………………….……
……………………………………………….……
……………………………………………….……

a- .btn:hover {
background-color: green;
color: white;
}
b- .btn:hover {
height: 40px;
border: 1px solid green;
}
c- .btn:active {
height: 40px;
background-color: green;
border: 1px solid green;
}

2- On souhaite colorer en rouge les éléments li de la liste ul. Compléter le code CSS qui
permet d’appliquer le style « couleur verte et mettre en gras » au li numéro : 2, 6, 10….
« 2pts »

Question Rendu Code CSS

visuel

1
 On souhaite colorer en rouge les <style>
éléments li de la liste ul. Compléter le
code CSS qui permet d’appliquer le ……………………………………… {
style « couleur verte et mettre en font-weight: 800;
gras » au li numéro : 2, 6, 10…. color: green;
}

</style>

a- li:nth-child(4n + 2)
b- li:nth-child(6n + 4)
c- li:nth-child(2,6,10)

3- Ecrire le code HTML pour la création de l’élément du formulaire suivant : « 1 pt »

Un input obligatoire de type email

a- Email <input type="text" required>

b- Email <input type="email" required>
c- Email <input type="email" disabled>

4- Ecrire le code HTML pour la création de l’élément du formulaire suivant : « 1 pt »

Une zone de texte multilignes qui aura le focus

a- <textarea autofocus="on">Saisir votre adresse</textarea>

b- <textarea required>Saisir votre adresse</textarea>
c- <textarea placeholder="Saisir votre adresse" autofocus></textarea>

5- Compléter le code javascript qui permet de colorer toutes les cellules de la

table en diagonale par sélection des <tr> « 2pts »

<script>
document.querySelectorAll('tr').forEach((item, i)
=> {
……………………………………………………………………………
…
})
</script>

a- item.children[(4-i)].style.backgroundColor="green";
b- item.children[i].style.backgroundColor="green";
c- let color = ‘green’

2
6- On souhaite charger en mode AJAX les données du web service : https://test.com/joueurs
Compléter le code suivant pour afficher les noms des joueurs sous forme de liste <li> « 2pts »

<h2>Liste des joueurs</h2>

<ul>

</ul>

<script>
fetch('https://test.com/joueurs')
.then(reponse => reponse.json())
.then(data => {
data.forEach(element => {
…………………………………………………………………………………………………………………………
});
})
</script>

a- document.querySelector('li').innerHTML = element.name
b- ul = "<li>" + element.name + "</li>"
c- document.querySelector('ul').innerHTML += "<li>" + element.name + "</li>"

7- On dispose d’un tableau html des notes. On souhaite colorer en vert les notes supérieurs
à 10. « 2pts »

<script>
document.querySelectorAll('td').forEach(item => {
……………………………………………………………………………………………. ;
})
</script>

a- item.style.color = "green"
b- if(item.innerText >= 10) item.style.color = "green"
c- style.color = "green"

8 – L’élément HTML paragraphe est mode display : « 1pt »

a- block
b- inline

9- L’élément HTML button est mode display : « 1pt »

a- block
b- inline

3
10- Compléter le code javascript qui permet de colorer toutes les cellules de
la table en diagonale par sélection des <tr> « 2pts »

<script>
document.querySelectorAll('tr').forEach((item,
i) => {
………………………………………………………………………
………
})
</script>

d- item.children[(4-i)].style.backgroundColor="red";
e- item.children[i].style.backgroundColor="red";
f- for(let i=0;i<4;i++)
for(let j=0;j<4;j++)
li.color[i+j] ="red"

11- Si ville = "CASABLANCA", que retourne ville.charAt(4)? « 0.5 pt »

a- A
b- B
c- AB

12- On dispose d’un tableau html des notes.

On souhaite colorer en rouge les notes inférieures à 10. « 2pts »

<script>
document.querySelectorAll('td').forEach(item => {
……………………………………………………………………………………………. ;
})
</script>

d- item.style.color = "red"
e- if(item.innerText <= 10) item.style.color = "red"
f- style.color = "red"

13- On souhaite charger en mode AJAX les données du web service :

https://jsonplaceholder.typicode.com/users'
Compléter le code suivant pour afficher les noms des users sous forme de liste <li> « 2pts »

<h2>Liste des users</h2>

<ul>

4
 </ul>

<script>
fetch('https://jsonplaceholder.typicode.com/users')
.then(reponse => reponse.json())
.then(data => {
data.forEach(element => {
…………………………………………………………………………………………………………………………
});
})
</script>

a- document.querySelector('li').innerHTML = element.name
b- document.querySelector('ul').innerHTML += "<li>" + element.name + "</li>"
c- ul = "<li>" + element.name + "</li>"

20- On souhaite annimer un carré rouge en créant un déplacement infinie en forme

d’escalier, compléter la condition IF pour atteindre cet objectif : « 2pts »

$(document).ready(function () {
var direction = 'down';
function escalier() {
let decalage = '';
if (
............................................................................. ) {
decalage = '-=100px';
direction = 'up';
}
if (parseInt($("div").css("left")) == 0 || direction
== 'down') {
decalage = '+=100px';
direction = 'down';
}
$("div").animate({left: decalage}, 1000)
.animate({top: decalage}, 1000, escalier);
}
escalier();
});

a- direction == 'up' && direction == 'down'

b- parseInt($("div").css("right")) == 210 || direction == 'down'
c- parseInt($("div").css("left")) > 210 || direction == 'up'