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 : .btn {
background-color: white;
color: green;
border-radius: 5%;
height: 40px;
border: 1px solid green;
}
Après survol de la souris :
……………………………………………….……
……………………………………………….……
……………………………………………….……
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'
