Intégration d'un chronomètre pour un questionnaire

Max747 Messages postés 258 Date d'inscription Statut Membre Dernière intervention -
Max747 Messages postés 258 Date d'inscription Statut Membre Dernière intervention - 29 sept. 2018 à 13:23

Bonjour,
Souhaitant intégrer un chronomètre à mon jeu des questions Q-C-M,
j'ai trouvé les codes de celui ci que j'ai quelque peu modifié pour ne présenter que les secondes et les minutes.
Voici ces scrypts:
jeu_automne/ph_qcm/chrono.php

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Chrono</title>
<script type="text/javascript">
function calque_if(){
    document.body.innerHTML = '<div id="chrono_boutton" style="text-align:center;">'+
                            '<button type="button" id="start_stop" style="font-weight:bold; font-size:50px; width:250px;">START</button> '+
                            '<button type="button" id="chrono_reset" style="font-weight:bold; font-size:50px; width:250px;">RESET</button>'+
                            '</div>'+
                            '<div id="chrono" style="text-align:center; font-size:60px;">00:00</div>';
    document.getElementById('start_stop').addEventListener( "click", function(){ start_stop_chrono();});
    document.getElementById('chrono_reset').addEventListener( "click", function(){ reset_chrono();});
}
window.onload = calque_if;
var chrono_timer = 0; var chrono_id;
 
function start_stop_chrono(){
    if(typeof chrono_id != 'undefined'){
        clearInterval(chrono_id);
        chrono_id = undefined;
        document.getElementById('start_stop').innerHTML = 'START';
    }
    else{
        document.getElementById('start_stop').innerHTML = 'STOP ';
        chrono_id = setInterval( function(){ chrono_timer = chrono_timer + 10; document.getElementById('chrono').innerHTML = converstion_nombre_temps(chrono_timer); }, 10);
    }
}
 
function converstion_nombre_temps(nombre){
    if(!isNaN(nombre)){
        var temps = new Date();
        temps.setTime(nombre);
        var tb_time = [temps.getMinutes(),temps.getSeconds()];
        for(var i = 0 ; i < tb_time.length ; i++){
            if((typeof tb_time[i] == 'undefined') || (!tb_time[i])){ tb_time[i] = '00';}
            else if(tb_time[i] < 10){ tb_time[i] = '0'+tb_time[i];}
        }
        return tb_time.join(':');
    }
}
 
function reset_chrono(){
    if(typeof chrono_id != 'undefined'){ clearInterval(chrono_id); chrono_id = undefined;}
    chrono_timer = 0;
    document.getElementById('start_stop').innerHTML = 'START';
    document.getElementById('chrono').innerHTML = '00:00';
}
</script>
</head>
<body style="font-weight:bold;">
</body>
</html>

Et voici sa présentation en image:

Celui ci serait présenté dans une page dont voici les codes:
jeu_automne/ph_qcm/interface/voir_qcm.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ph_QCM</title>
<link type="text/css" rel="stylesheet" href="interface/style.css" />
<script src="voir_qcm_script.js" type="text/javascript"></script>
</head>
<body onload="javascript:init([[NB_QUESTIONS]], '[[DOSSIER_QCM]]');">
<div id="page">

	<div id="titre">Ph_QCM : [[TITRE]]</div>

	<div class="entoure_cadre">
		<div class="cadre">
			<div class="titre_cadre"><div id="c_titre">:. Question XX/XX .:</div><br /><hr /><br /></div>
			<div class="desc_cadre"><div id="c_cadre"></div><br /></div>
		</div>
		<div class="boutons">
			<ul>
				<li id="bout_1"></li>
				<li id="bout_0"> </li>
			</ul>
		</div>
	</div>

	<div id="voir_resultats"></div>

</div>
</body>
</html>

Et dont voici la présentation en image:
jeu_automne/ph_qcm/interface/voir_qcm.php

Les boutons START et RESET, n' auront plus lieu d'exister puisqu' ils devront être remplacés automatiquement par le chargement de la page jeu_automne/ph_qcm/interface/voir_qcm.php si possible et
dont voici les codes:

<?php
session_start ();
require_once 'connexion.php';
require_once 'fonctions.php';
if (!isset($_GET['qcm']) || !file_exists('qcm/'.$_GET['qcm']))//Si $_GET['qcm'] ou si file_exists('qcm/'.$_GET['qcm']) n'est pas défini, retour à la page index.php
{
	header('Location: index.php'); // Le qcm n'existe pas.
	exit(0);
}

//$_SESSION['qcm'] = $_GET['qcm']; // On sauvegarde l'identifiant du QCM dans les variables de session.

    // Requête pour vérifier que l'utilisateur n'est pas déjà venu sur le QCM auparavent
	$erreur = '';
    $stmt = $connection->prepare("SELECT count(*) AS nb FROM reponses WHERE inscription_id = :inscription_id AND dossier = :dossier");
    $stmt->execute(array(
        ':inscription_id' => $_SESSION['id_inscription'],
        ':dossier' => $_SESSION['qcm'],
    ));
    $result = $stmt->fetch(PDO::FETCH_OBJ);
    if ($result->nb > 0) { // L'utilisateur a déjà vu le QCM
	header ('Location:erreur_participation.php');
	exit ();
	}
			
// Si il n'y a pas d'erreur on affiche le QCM
if (empty($erreur)) {

    // Initialisation des variables.
    $fichier_xml = simplexml_load_file('qcm/' . $_SESSION['qcm'] . '/qcm.xml');//$_SESSION['qcm'] est le nom de dossier créée pour contenir le fichier xml et les images éventuelles.

    if (isset($_SESSION['rep'])) unset($_SESSION['rep']);
    $_SESSION['nb_q'] = count($fichier_xml->question);
    $_SESSION['q'] = -1;
    $_SESSION['fini'] = 0;

    // On affiche la page de modification des questions.
    $_SESSION['titre'] = (string)$fichier_xml->titre;
    $html = motif('voir_qcm', array('[[TITRE]]', '[[NB_QUESTIONS]]', '[[DOSSIER_QCM]]'), array($_SESSION['titre'], $_SESSION['nb_q'], $_SESSION['qcm']));
	
	// Initialise la réponse pour ensuite vérifier si l'utilisateur ne revient pas sur le QCM (voir requête au début du fichier)
	//préparation de la requête et des variables
		$sql = "INSERT INTO participation (username, password, qcm) VALUES (:username, :password, :qcm)";
		$datas = array (':username'=>$_SESSION['username'],
						':password'=>$_SESSION['password'],
						':qcm'=>$_SESSION['qcm']);
	//Execution de la requete
		try{
		  $requete = $connection -> prepare($sql) ;
		  $requete->execute($datas) ;
		}catch(Exception $e){
		  // en cas d'erreur :
		   echo " Erreur ! ".$e->getMessage();
		   echo " Les datas : " ;
		  print_r($datas);
		}	
    echo $html;
} 
?>

Quand au bouton RESET, celui sera remplacé par l'appui sur le bouton VALIDER (la réponse) du fichier voir_qcm_script.js (ligne 103 je crois) dont voici les codes:

/* Script utilisant Ajax */

// Variables globales.
var qcm = ''; // Dossier du QCM.
var nb_q = 0; // nombre de questions dans le QCM.
var q = 1; // numéro de la question actuelle.
var rep = 0; // numéro de la réponse actuelle.
var fini = 0; // indique si le QCM est terminé (affichage du corrigé.

function reception()
{
	if (http_request.readyState == 4 && http_request.status == 200)
	{
		//alert(http_request.responseText);
		var fichierxml = http_request.responseXML;

		if (fini == 1) // Affichage du corrigé.
		{
			var question, image, explic, reponses;
			var xml = fichierxml.getElementsByTagName('question').item(0);
			if (xml.childNodes[0].firstChild) question = xml.childNodes[0].firstChild.data;
			else question = '';
			if (xml.childNodes[1].firstChild) image = xml.childNodes[1].firstChild.data;
			else image = '';
			if (xml.childNodes[2].firstChild) explic = xml.childNodes[2].firstChild.data;
			else explic = '';
			reponses = new Array;
			for (i = 0; i < xml.childNodes[3].childNodes.length; i++)
			{
				reponses[i] = new Array;
				if (xml.childNodes[3].childNodes[i].firstChild)
					reponses[i][0] = xml.childNodes[3].childNodes[i].firstChild.data;
				else
					reponses[i][0] = '';
				reponses[i][1] = xml.childNodes[3].childNodes[i].getAttribute('coul');
			}

			// remplissage de la page avec les données lues.
			document.getElementById('c_titre').innerHTML = ':. Correction : Question '+q+'/'+nb_q+' .:';
			var html = '<div id="voir_question">'+question+'</div>';
			if (image != '') html += '<div id="voir_image"><img alt="" src="qcm/'+qcm+'/'+image+'" /></div>';
			if (explic != '') html += '<div id="voir_explic">'+explic+'</div>';
			html += '<div id="voir_reponses">';
			rep = 0;
			for (i = 0; i < reponses.length; i++)
			{
				html += '> <a class="'+reponses[i][1]+'">'+reponses[i][0]+'</a><br />';
			}
			html += '</div>';
			document.getElementById('c_cadre').innerHTML = html;
			if (q > 1) document.getElementById('bout_0').innerHTML = '<a href="javascript:c_prec();">Question précédante</a>';
			else  document.getElementById('bout_0').innerHTML = 'Question précédante';
			if (q < nb_q) document.getElementById('bout_1').innerHTML = '<a href="javascript:c_suiv();">Question suivante</a>';
			else  document.getElementById('bout_1').innerHTML = 'Question suivante';
			return 0;
		}


		if (fichierxml.getElementsByTagName('bonnesreponses').item(0) != null)
		{
			// Le QCM est fini, on affiche le nombre de bonnes réponses.
			var bonnes_rep = fichierxml.getElementsByTagName('bonnesreponses').item(0).firstChild.data;
			document.getElementById('c_cadre').innerHTML = '<div id="voir_result"><img src="interface/vert.gif" alt="" height="15" width="'+Math.floor(bonnes_rep*200/nb_q)+'" class="no_border_droite" /><img src="interface/rouge.gif" alt="" height="15" width="'+Math.floor((nb_q-bonnes_rep)*200/nb_q)+'" class="no_border_gauche" /><br /><br />Bonnes réponses : '+bonnes_rep+'/'+nb_q+'</div>';
			document.getElementById('c_titre').innerHTML = ':. Résultats .:';
			document.getElementById('bout_1').innerHTML = '<a href="javascript:corrige();">Voir le corrigé</a>';
			setTimeout(function() {
			window.location.href = '/jeu_automne/ph_qcm/insertion_points.php';
			}, 15000);	
			// redirection au bout de 15 secondes.
			document.getElementById('voir_resultats').innerHTML = '<h2 style="color: Green;">La bonne réponse est montrée en verte dans le corrigé.</h2><br><h3 style="color: red;">Vous verrez automatiquement les résutats dans 15 secondes.<br>Ou cliquez sur la flèche ci dessous pour les consulter de suite.</h3><a href="/jeu_automne/ph_qcm/insertion_points.php"><img src="/jeu_automne/ph_qcm/img/retour_d.gif" alt="Aller"/></a>';
			return 0;
		}

		// On récupère les données de la question.
		var question, image, explic, reponses;
		var xml = fichierxml.getElementsByTagName('question').item(0);
		if (xml.childNodes[0].firstChild) question = xml.childNodes[0].firstChild.data;
		else question = '';
		if (xml.childNodes[1].firstChild) image = xml.childNodes[1].firstChild.data;
		else image = '';
		if (xml.childNodes[2].firstChild) explic = xml.childNodes[2].firstChild.data;
		else explic = '';
		reponses = new Array;
		for (i = 0; i < xml.childNodes[3].childNodes.length; i++)
		{
			if (xml.childNodes[3].childNodes[i].firstChild) reponses[i] = xml.childNodes[3].childNodes[i].firstChild.data;
			else reponses[i] = '';
		}

		// remplissage de la page avec les données lues.
		document.getElementById('c_titre').innerHTML = ':. Question '+q+'/'+nb_q+' .:';
		var html = '<div id="voir_question">'+question+'</div>';
		if (image != '') html += '<div id="voir_image"><img alt="" src="qcm/'+qcm+'/'+image+'" /></div>';
		if (explic != '') html += '<div id="voir_explic">'+explic+'</div>';
		html += '<div id="voir_reponses">';
		rep = 0;
		for (i = 0; i < reponses.length; i++)
		{
			html += '<input type="radio" name="rep"'+((i == rep) ? ' checked="checked"' : '')+' onclick="javascript:rep='+i+';" /> '+reponses[i]+'<br />';
		}
		html += '</div>';
		document.getElementById('c_cadre').innerHTML = html;
		document.getElementById('bout_1').innerHTML = '<a href="javascript:suiv();">Valider</a>';
	}
}

function envoie_req(req)
{
	// création du XMLHttpRequest et envoie d'une requête.
	if (window.XMLHttpRequest)
	{
		http_request = new XMLHttpRequest();
		if (http_request.overrideMimeType) http_request.overrideMimeType('text/xml');
	}
	else if (window.ActiveXObject)
	{
		try { http_request = new ActiveXObject("Msxml2.XMLHTTP") }
		catch (e)
		{
			try { http_request = new ActiveXObject("Microsoft.XMLHTTP") }
			catch (e) {}
		}
	}
	if (!http_request) alert('Erreur : Impossible d'initialiser XMLHttpRequest.');

	http_request.onreadystatechange = reception;
	http_request.open('POST', 'voir_ajax.php', true);
	http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

	http_request.send(req);
}

function init(nb_questions, dossier_qcm)
{
	nb_q = nb_questions;
	qcm = dossier_qcm;
	document.getElementById('bout_1').innerHTML = 'Valider'; // On masque le bouton jusqu'à reception des données.
	envoie_req(null);
}

function suiv()
{
	q ++;
	document.getElementById('bout_1').innerHTML = 'Valider'; // On masque le bouton jusqu'à reception des données.
	envoie_req('rep='+rep);
}

function corrige()
{
	q = 1;
	fini = 1;
	document.getElementById('bout_1').innerHTML = ''; // On masque le bouton jusqu'à reception des données.
	envoie_req('q='+q);
}

function c_suiv()
{
	q ++;
	document.getElementById('bout_0').innerHTML = 'Question précédante'; // On masque le bouton jusqu'à reception des données.
	document.getElementById('bout_1').innerHTML = 'Question suivante'; // On masque le bouton jusqu'à reception des données.
	envoie_req('q='+q);
}

function c_prec()
{
	q --;
	document.getElementById('bout_0').innerHTML = 'Question précédante'; // On masque le bouton jusqu'à reception des données.
	document.getElementById('bout_1').innerHTML = 'Question suivante'; // On masque le bouton jusqu'à reception des données.
	envoie_req('q='+q);
}

La finalité de ce chronomètre consisterait ensuite, dans un second temps, à mettre à jour une base de donnée comportant des points obtenus en cas de bonne réponse et en fonction d'un nombre plus ou moins important de ceux ci selon le temps compté par le chronomètre.

Merci d'avance de bien vouloir m'aider à l'intégration de ce projet dans mon jeu déjà existant!

Afficher la suite

A voir également:

Intégration d'un chronomètre pour un questionnaire
Intégrer une vidéo dans un powerpoint - Guide
Télécharger chronomètre powerpoint - Télécharger - Présentation
Chronometre contraction - Télécharger - Santé & Bien-être
Multi chronomètre - Télécharger - Bureautique
Telecharger chronometre pc - Télécharger - Personnalisation

5 réponses

Réponse 1 / 5

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Bonjour,
Et quel est le souci exactement ?
As tu essayé de placer le chrono dans ton fichier ? As tu des erreurs dans la console du navigateur ?

Réponse 2 / 5

Max747 Messages postés 258 Date d'inscription Statut Membre Dernière intervention

Bonjour.
Premier soucis:
Le chrono est bien présent dans la page de la question.Mais il n'y a que lui.La question n'est donc pas présente.
Résultat en image:

Voici le fichier jeu_automne/ph_qcm/interface/voir_qcm.html que j'ai modifié en insérant le scrypt du fichier "chrono" ligne 12 à 56 et auquel j'ai inclus le chrono en conservant les boutons.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ph_QCM</title>
<link type="text/css" rel="stylesheet" href="interface/style.css" />
<script src="voir_qcm_script.js" type="text/javascript"></script>

</head>
<body onload="javascript:init([[NB_QUESTIONS]], '[[DOSSIER_QCM]]');">
    
  <script type="text/javascript">
function calque_if(){
    document.body.innerHTML = '<div id="chrono_boutton" style="text-align:center;">'+
                            '<button type="button" id="start_stop" style="font-weight:bold; font-size:50px; width:250px;">START</button> '+
                            '<button type="button" id="chrono_reset" style="font-weight:bold; font-size:50px; width:250px;">RESET</button>'+
                            '</div>'+
                            '<div id="chrono" style="text-align:center; font-size:60px;">00:00</div>';
    document.getElementById('start_stop').addEventListener( "click", function(){ start_stop_chrono();});
    document.getElementById('chrono_reset').addEventListener( "click", function(){ reset_chrono();});
}
window.onload = calque_if;
var chrono_timer = 0; var chrono_id;
 
function start_stop_chrono(){
    if(typeof chrono_id != 'undefined'){
        clearInterval(chrono_id);
        chrono_id = undefined;
        document.getElementById('start_stop').innerHTML = 'START';
    }
    else{
        document.getElementById('start_stop').innerHTML = 'STOP ';
        chrono_id = setInterval( function(){ chrono_timer = chrono_timer + 10; document.getElementById('chrono').innerHTML = converstion_nombre_temps(chrono_timer); }, 10);
    }
}
 
function converstion_nombre_temps(nombre){
    if(!isNaN(nombre)){
        var temps = new Date();
        temps.setTime(nombre);
        var tb_time = [temps.getMinutes(),temps.getSeconds()];
        for(var i = 0 ; i < tb_time.length ; i++){
            if((typeof tb_time[i] == 'undefined') || (!tb_time[i])){ tb_time[i] = '00';}
            else if(tb_time[i] < 10){ tb_time[i] = '0'+tb_time[i];}
        }
        return tb_time.join(':');
    }
}
 
function reset_chrono(){
    if(typeof chrono_id != 'undefined'){ clearInterval(chrono_id); chrono_id = undefined;}
    chrono_timer = 0;
    document.getElementById('start_stop').innerHTML = 'START';
    document.getElementById('chrono').innerHTML = '00:00';
}
</script>  
    
<div id="page">

	<div id="titre">Ph_QCM : [[TITRE]]</div>

	<div class="entoure_cadre">
		<div class="cadre">
			<div class="titre_cadre"><div id="c_titre">:. Question XX/XX .:</div><br /><hr /><br /></div>
			<div class="desc_cadre"><div id="c_cadre"></div><br /></div>
		</div>
		<div class="boutons">
			<ul>
				<li id="bout_1"></li>
				<li id="bout_0"> </li>
			</ul>
		</div>
	</div>

	<div id="voir_resultats"></div>

</div>
</body>
</html>

Je pense que la bonne méthode consiste d'abord à inclure le chrono dans la page correspondant à la question.Puis ensuite de supprimer les boutons Start et Reset pour remplacer Start par le chargement de le page correspondant à la question.Ainsi le chrono commencera à compter dès qu'apparaître la page présentant la question.
Sinon sur ce que je viens de modifier ci dessus il n'y a pas d'erreur.

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Je t'ai demandé si tu avais des erreurs dans la console de ton navigateur... je ne pense pas que tu y ai répondu....

Donc:
( le mieux étant de passer par Firefox pour faire ça )
Tu affiches les outils de dev de ton navigateur (en générale.. via la touche F12 de ton clavier)
Tu te places sur l'onglet "CONSOLE"
Tu actives si ce n'est pas déjà le cas, le débugage de l'ajax (xmlhttprequest) ( si tu es sur chrome, pense à installer le plugin ajax debug )
Et enfin...
Tu lances la page qui te pose problème (celle où se trouve le chrono + ton code de question)

Et tu regardes ce qui s'affiche dans ta console.

Réponse 3 / 5

yg_be Messages postés 23541 Date d'inscription Statut Contributeur Dernière intervention Ambassadeur 1 584

bonjour, peux-tu partager:
- le code php de la fonction motif
- le code source html de la page affichée (la page dont tu montres l'image avec rien que le chrono). tu dois obtenir cette page source dans le navigateur, ce n'est pas un fichier sur ton site.

Réponse 4 / 5

Max747 Messages postés 258 Date d'inscription Statut Membre Dernière intervention

bonjour, tu trouveras le code source html en répondant à une question ici:
https://jeuxechecs.fr/jeu_automne/ph_qcm/index.php
après inscription.
Je ne trouve pas la fonction motif.
Pourquoi ces renseignements?

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

Max747 Messages postés 258 Date d'inscription Statut Membre Dernière intervention

Comment activer le débugage de l'Ajax par Firefox ?
Merci.

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Dans l'onglet CONSOLE,
tu cliques sur le bouton "filter"
puis tu t'assure que "xhr" est en bleu ( ainsi que "Erreurs, Journaux et avertissements )

Max747 Messages postés 258 Date d'inscription Statut Membre Dernière intervention

L'onglet "filter" me semble vide même en cliquant dessus comme l'indique l'image ci dessous:

Donc pas de "xhr" ainsi que "Erreurs" et journaux.
Filter est actif à mon avis car entouré d'un cadre bleu.

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

tu as quelle version de firefox ?
Tu es bien sur l'onglet "CONSOLE" ?
Une capture écran de toute la fenêtre serait la bienvenue.. pas juste l'angle haut gauche....

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Et puis.. facile de voir si tu es en bien dans la console.. c'est d'ajouter avant ton </body> le code suivant


<script type="'text/javascript">
console.log (" La console affiche bien des infos....");
</script>
</body>

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Et au passage... un peu de lecture :
https://developer.mozilla.org/fr/docs/Outils/Console_Web

Si ancienne version de FF ... tu dois pouvoir voir les requêtes ajax dans l'onglet réseau (network).
Mais commence par nous montrer le contenu de la CONSOLE lorsque tu affiches ta page....
On verra ensuite pour les requetes ajax

Discussions similaires

questionnaire à remplir sur mail reçu

Remplir un formulaire reçu par mail

Bonjour ! Comment faire un dépouillement sur excel ?

Votre réponse

Discussions similaires