# Application de quiz
Ces quiz sont les quiz avant et après les cours du programme de science des données disponible sur https://aka.ms/webdev-beginners
## Ajouter un ensemble de quiz traduit
Ajoutez une traduction de quiz en créant des structures de quiz correspondantes dans les dossiers `assets/translations`. Les quiz originaux se trouvent dans `assets/translations/en`. Les quiz sont divisés en plusieurs groupes. Assurez-vous d'aligner la numérotation avec la section de quiz appropriée. Il y a un total de 40 quiz dans ce programme, avec une numérotation commençant à 0.
Voici la structure d'un fichier de traduction :
```
[
{
"title": "A title",
"complete": "A complete button title",
"error": "An error message upon selecting the wrong answer",
"quizzes": [
{
"id": 1,
"title": "Title",
"quiz": [
{
"questionText": "The question asked",
"answerOptions": [
{
"answerText": "Option 1 title",
"isCorrect": true
},
{
"answerText": "Option 2 title",
"isCorrect": false
}
]
}
]
}
]
}
]
```
Après avoir modifié les traductions, éditez le fichier index.js dans le dossier de traduction pour importer tous les fichiers en suivant les conventions de `en`.
Modifiez le fichier `index.js` dans `assets/translations` pour importer les nouveaux fichiers traduits.
Par exemple, si votre fichier JSON de traduction est `ex.json`, utilisez 'ex' comme clé de localisation, puis ajoutez-le comme indiqué ci-dessous pour l'importer :
index.js
```
import ex from "./ex.json";
// if 'ex' is localization key then enter it like so in `messages` to expose it
const messages = {
ex: ex[0],
};
export default messages;
```
## Exécuter l'application de quiz localement
### Prérequis
- Un compte GitHub
- [Node.js et Git](https://nodejs.org/)
### Installation et configuration
1. Créez un dépôt à partir de ce [modèle](https://github.com/new?template_name=Web-Dev-For-Beginners&template_owner=microsoft)
1. Clonez votre nouveau dépôt et accédez au dossier quiz-app
```bash
git clone https://github.com/your-github-organization/repo-name
cd repo-name/quiz-app
```
1. Installez les packages npm et les dépendances
```bash
npm install
```
### Construire l'application
1. Pour construire la solution, exécutez :
```bash
npm run build
```
### Démarrer l'application
1. Pour exécuter la solution, exécutez :
```bash
npm run dev
```
### [Optionnel] Linting
1. Pour vérifier que le code est correctement linté, exécutez :
```bash
npm run lint
```
## Déployer l'application de quiz sur Azure
### Prérequis
- Un abonnement Azure. Inscrivez-vous gratuitement [ici](https://aka.ms/azure-free).
_Estimation du coût pour déployer cette application de quiz : GRATUIT_
[](https://portal.azure.com/#create/Microsoft.StaticApp)
Une fois connecté à Azure via le lien ci-dessus, sélectionnez un abonnement et un groupe de ressources, puis :
- Détails de l'application web statique : Fournissez un nom et sélectionnez un plan d'hébergement
- Connexion GitHub : Définissez votre source de déploiement comme GitHub, puis connectez-vous et remplissez les champs requis du formulaire :
- *Organisation* – Choisissez votre organisation.
- *Dépôt* – Sélectionnez le dépôt du programme Web Dev for Beginners.
- *Branche* - Sélectionnez une branche (main)
- Préréglages de construction : Azure Static Web Apps utilise un algorithme de détection pour identifier le framework utilisé dans votre application.
- *Emplacement de l'application* - ./quiz-app
- *Emplacement de l'API* -
- *Emplacement de sortie* - dist
- Déploiement : Cliquez sur 'Review + Create', puis sur 'Create'
Une fois déployé, un fichier de workflow sera créé dans le répertoire *.github* de votre dépôt. Ce fichier de workflow contient les instructions des événements qui déclencheront un nouveau déploiement de l'application sur Azure, par exemple, _un **push** sur la branche **main**_, etc.
Exemple de fichier de workflow
Voici un exemple de ce à quoi pourrait ressembler le fichier de workflow GitHub Actions :
name: Azure Static Web Apps CI/CD
```
on:
push:
branches:
- main
pull_request:
types: [opened, synchronize, reopened, closed]
branches:
- main
jobs:
build_and_deploy_job:
runs-on: ubuntu-latest
name: Build and Deploy Job
steps:
- uses: actions/checkout@v2
- name: Build And Deploy
id: builddeploy
uses: Azure/static-web-apps-deploy@v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
repo_token: ${{ secrets.GITHUB_TOKEN }}
action: "upload"
app_location: "quiz-app" # App source code path
api_location: ""API source code path optional
output_location: "dist" #Built app content directory - optional
```
- Post-déploiement : Une fois le déploiement terminé, cliquez sur 'Go to Deployment', puis sur 'View app in browser'.
Une fois que votre action GitHub (workflow) est exécutée avec succès, actualisez la page en direct pour voir votre application.
**Avertissement** :
Ce document a été traduit à l'aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d'assurer l'exactitude, veuillez noter que les traductions automatisées peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d'origine doit être considéré comme la source faisant autorité. Pour des informations critiques, il est recommandé de recourir à une traduction professionnelle réalisée par un humain. Nous déclinons toute responsabilité en cas de malentendus ou d'interprétations erronées résultant de l'utilisation de cette traduction.