QCM HTML CSS JS Avec Corriges [PDF]

Zitiervorschau

---

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 Avant le survol de la souris :

Code CSS .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 visuel

Code CSS

1

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….

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 b- Email c- Email

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- Saisir votre adresse b- Saisir votre adresse c- 5- Compléter le code javascript qui permet de colorer toutes les cellules de la table en diagonale par sélection des « 2pts »

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

« 2pts » Liste des joueurs

a- document.querySelector('li').innerHTML = element.name b- ul = "

" + element.name + "

" c- document.querySelector('ul').innerHTML += "

" + element.name + "

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

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 « 2pts »

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