%PDF-
%PDF-
Mini Shell
Mini Shell
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="css/style.css" >
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
#left,#right{
height: 90px;
line-height: 40px;
text-align: center;
max-width: 30px;
border-radius: 0px;
background: #565252 !important;
}
#left{
float: left;
}
#right{
float: right;
}
</style>
</head>
<body >
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/db.js"></script>
<nav class="orange" role="navigation" id="nav_mobile"></nav>
<div class="section no-pad-bot" id="index-banner">
<div class="container">
<div class="row">
<div class="col s12 m12">
<h6 class="h6" id="num_q_serie"> <i class="material-icons icon-header-cadr">play_circle_filled</i> <span id="sous_categorie"></span> , Quéstion : <span id="question_n"></span>/<span id="total_question"></span></h6>
<div class="card">
<div class="card-image">
<div class="progress col s12 display_none" id="loading"><div class="indeterminate orange" ></div></div>
<img src="#" id="img_question" style="display: none;"/>
<div id="question_arabic"></div>
<button type="button" id="btn_open_chat" class="btn-floating halfway-fab waves-effect waves-light orange"><i class="material-icons">chat</i></button>
<button class="btn-floating halfway-fab waves-effect waves-light orange" value="0" id="play_audio" style="right: 80px;"><i class="material-icons">play_circle_outline</i></button>
</div>
<div class="card-content ">
<div class="col s2 m2"><button class="btn-floating btn-large grey" id="left"><i class="material-icons">keyboard_arrow_left</i></button></div>
<div class="col s8 m8 rep_q_user">
<div class="col s6 m6"><button class="btn-floating btn-large grey" value='2'>1</button></div>
<div class="col s6 m6"><button class="btn-floating btn-large grey" value='2'>2</button></div>
<div class="col s6 m6"><button class="btn-floating btn-large grey" value='2'>3</button></div>
<div class="col s6 m6"><button class="btn-floating btn-large grey" value='2'>4</button></div>
</div>
<div class="col s2 m2"><button class="btn-floating btn-large grey" id="right"><i class="material-icons">keyboard_arrow_right</i></button></div>
<div class="col s12 m12 btn-rep">
<div class="col s6 m6"><button class="aves-effect waves-light btn green" id="valider" >
<i class="material-icons dp48">check</i></button>
</div>
<div class="col s6 m6">
<button class="aves-effect waves-light btn red" id="correction" >
<i class="material-icons dp48">replay</i></button>
</div>
</div>
<div class="col s12 m12 img_pub" style="display:none;">
<a href="#" onclick="window.open('http://jhbplus.com', '_system');" ><img src="#" /></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="angl_chats">
<div class="row">
<h6 class="header_chat"> <i class="material-icons icon-header-cadr">chat</i> Chat
<button type="button" id="btn_close_chat" class="btn-floating waves-effect waves-light orange"><i class="material-icons">close</i></button>
</h6>
<div class="all_chat" id="all_chat">
</div>
</div>
<div class="row" id="form_chat">
<form class="col s12">
<div class="row">
<div class="row">
<!-- Switch -->
<p class="img_question_cap" data-active="0">
<img src="images/img_capt.jpg" /> <span> Joindre l'image de question </span>
</p>
</div>
<div class="input-field col s8">
<i class="material-icons prefix">mode_edit</i>
<input type="text" id="message" />
</div>
<div class="input-field col s3">
<button class="btn waves-effect waves-light" id="envoyer" type="button" name="action">
<i class="material-icons right">send</i>
</button>
</div>
</div>
</form>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#correction").click(function(){
$(".rep_q_user button").val("2");
$(".rep_q_user button").removeClass("amber");
$(".rep_q_user button").addClass("grey");
});
// pub
$.post(url_ws,{method:"pub"}, function() {
},"json")
.done(function(result) {
var data_res=result.data;
var count=data_res.length;
if(count>0){
var pub=data_res[0].img;
if(pub==""){
pub="img_pub/pub-def.png";
}
}
$(".img_pub img").attr("src",url_fix+pub);
// $(".img_pub a").attr("href",data_res[0].url);
$(".img_pub").show();
}).fail(function() {
var $toastContent = $("<span > Pas de connexion internet </span>");
Materialize.toast($toastContent, 3000,"alert-danger","top");
$("#loading").hide();
});
//-----------------
var img_capt_def="images/img_capt.jpg";
$(".img_question_cap").click(function(){
var active=$(this).attr("data-active");
if(active==0){
var img_q_act=$("#img_question").attr("src");
$(this).find("img").attr("src",img_q_act);
$(this).find("span").text(" Supprimer l'image de question");
$(this).attr("data-active","1");
}
if(active==1){
$(this).find("img").attr("src",img_capt_def);
$(this).find("span").text(" Joindre l'image de question");
$(this).attr("data-active","0");
}
});
$("#btn_close_chat").click(function(){
$("#angl_chats").hide();
});
$("#btn_open_chat").click(function(){
$("#angl_chats").show();
});
$("#loading").show();
var all_data="";
var sous_categorie_id=$_GET['sous_categorie_id'];
var sous_categorie=$_GET['sous_categorie'];
$("#sous_categorie").html(sous_categorie);
var question=0;
var id_question=0;
var question_n=1;
var total_question=0;
var reponse_valide="";
var count_reponse_q=0;
var audioElement = document.createElement('audio');
function next_q(data_res){
reponse_valide=data_res['rep'];
var arr_reponse_valide=reponse_valide.split(",");
count_reponse_q=arr_reponse_valide.length;
id_question=data_res['id_question'];
$("#img_question").attr("src",data_res['url_image']);
$("#img_question").show();
audioElement.setAttribute('src', data_res['question_url_mp3c_arabic']);
$("#question_arabic").html(data_res["question_arabic"]);
$("#question_n").text(question_n);
$("#total_question").text(total_question);
audioElement.play();
$("#play_audio").val("1");
$("#play_audio").find("i").text("pause_circle_outline");
}
$.post(url_ws,{method:"liste_questions",sous_categorie_id:sous_categorie_id}, function() {
},"json")
.done(function(result) {
var data_res=result["data"];
all_data=result["data"];
var count=data_res.length;
var data_res=result.data[question];
total_question=count;
if(count>0){
next_q(data_res);
$("#loading").hide();
}else{
var $toastContent = $("<span > Série vide !</span>");
Materialize.toast($toastContent, 3000,"alert-danger","top");
$("#loading").hide();
}
})
.fail(function() {
var $toastContent = $("<span > Pas de connexion internet </span>");
Materialize.toast($toastContent, 3000,"alert-danger","top");
$("#loading").hide();
});
/*--------------------------------*/
$("#right").click(function(){
if(question_n<total_question){
question=(question+1);
question_n=(question_n+1);
var data=all_data[question];
console.log(data);
next_q(data);
$("#question_n").text(question_n);
}
});
$("#left").click(function(){
if(question_n>1){
question=(question-1);
question_n=(question_n-1);
var data=all_data[question];
next_q(data);
$("#question_n").text(question_n);
}
});
/*--------------------------------*/
$("#play_audio").click(function(){
if($(this).val()==0){
audioElement.play();
$(this).val("1");
$(this).find("i").text("pause_circle_outline");
}else{
audioElement.pause();
$(this).val("0");
$(this).find("i").text("play_circle_filled");
}
});
$("#valider").click(function(){
$("#loading").show();
var rep_q_user=[];
$( ".rep_q_user button" ).each(function( index ) {
if(index<count_reponse_q){
rep_q_user.push($( this ).val() );
}
});
rep_q_user=rep_q_user.join();
var rep=2;
$(".rep_q_user button").val("2");
if(rep_q_user==reponse_valide){
rep=1;
}
var user_id=get_l_s_by_name("id_user");
$.post(url_ws,{method:"user_reponse",question_id:id_question,sous_categorie_id:sous_categorie_id, reponse:rep_q_user,user_id:user_id,repense_valide:rep}, function() {
},"json")
.done(function(result) {
$("#loading").hide();
}).fail(function() {
var $toastContent = $("<span > Votre réponse n'est pas été enregistré ! </span>");
Materialize.toast($toastContent, 3000,"alert-danger","top");
$("#loading").hide();
});
$("#loading").show();
$("#img_question").hide();
$(".rep_q_user button").val("2");
$(".rep_q_user button").removeClass("amber");
$(".rep_q_user button").addClass("grey");
question++;
question_n++;
if(question_n>total_question){location.href="resultat.html?sous_categorie_id="+sous_categorie_id+"&sous_categorie="+sous_categorie;}else{
var data=all_data[question];
next_q(data);
$("#loading").hide();
setTimeout(function(){
audioElement.play();
$("#play_audio").val("1");
$("#play_audio").find("i").text("pause_circle_outline");
}, 2000);
}
});
/*--------------------------------*/
});
</script>
<script>
$(".rep_q_user button").click(function(){
if( $(this).val()==2){
$(this).removeClass("grey");
$(this).addClass("amber");
$(this).val("1");
}else{
$(this).removeClass("amber");
$(this).addClass("grey");
$(this).val("2");
}
});
</script>
<!------------- chats script-->
<script>
$( document ).ready(function() {
//----------------------
/*
background-color: #fafafa !important;
border: 1px solid orange;
*/
var last_id_chat=get_l_s_by_name("last_id_chat");
var user_id=get_l_s_by_name("id_user");
var ecole_id=get_l_s_by_name("ecole_id");
var nom=get_l_s_by_name("nom");
var nom_famille=get_l_s_by_name("nom_famille");
// $('#chat').scrollTop($('#chat')[0].scrollHeight);
$("#loading").show();
get_last_mesage(20,"init");
setTimeout(function(){
setInterval(function(){
get_last_mesage(20,"real_time");
}, 2000);
},5000);
//---
function get_last_mesage(nb_msg,stat){
var id_chat=$('#all_chat .div_msg:last-child').attr("data-id");
if(typeof id_chat== 'undefined'){
id_chat=0;
}
$.post(url_ws_chat, { user_id:user_id,ecole_id:ecole_id,action: "get_last_message",nb_msg:nb_msg,last_id_chat:last_id_chat ,stat:stat},"json")
.done(function( data ) {
var ids_new_msg = [];
//var data=JSON.parse(data);
var all_chat="";
var all_msg=data.result.all_msg;
for(i=0;i<all_msg.length;i++){
if(all_msg[i].message!=""){
var count_=$(".div_msg[data-id='"+all_msg[i].id_chat+"']").length;
if(count_==0){
all_chat+=all_msg[i].message;
var msg_notif=parseInt($(".msg_notif").text());
msg_notif=parseInt(all_msg[i].count_message);
$(".msg_notif").text(msg_notif);
set_l_s_by_name("last_id_chat",all_msg[i].id_chat);
last_id_chat=all_msg[i].id_chat;
if(stat=="real_time"){
ids_new_msg.push(all_msg[i].id_chat);
}
}
}
}
$("#all_chat").append(all_chat);
// ids_new_msg
for(j=0;j<ids_new_msg.length;j++){
$('div[data-id="'+ids_new_msg[j]+'"]').addClass("div_msg_new");
}
if(all_msg.length>0){
$("#all_chat").scrollTop($("#all_chat")[0].scrollHeight);
/*
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', "audio_notification/new_msg.mp3");
audioElement.play();
*/
}
/*
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', "audio_notification/new_msg.mp3");
audioElement.play();
*/
});
$("#loading").hide();
}
$(document).keypress(function(e) {
if(e.which == 13) {
$('#envoyer').trigger('click');
}
});
$( "#envoyer" ).on( "click", function() {
if($("#message").val()!=""){
var msg_capt="";
var is_c_msg=$(".img_question_cap").attr("data-active");
if(is_c_msg==1){
var ques_int=$("#num_q_serie").text();
var img_int=$("#img_question").attr("src");
ques_int=ques_int.replace("play_circle_filled","");
msg_capt="<h6>"+ques_int+"</h6>"+"<img class='img_capt_q' src='"+img_int+"' >";
}
var message=msg_capt+"<br/>"+$("#message").val();
/* */
var date_message=new Date().toISOString().slice(0, 19).replace('T', ' ');
var jqxhr = $.post( url_ws_chat,{user_id:user_id,ecole_id:ecole_id,nom:nom,nom_famille:nom_famille,action:"envoyer_message",message:message,date_message:date_message}, function(data) {
},"json")
.done(function(data) {
var all_msg=data.result.all_msg;
if(all_msg.length>0){
$("#message").val("");
if(all_msg[0].message!=""){
var msg=all_msg[0].message;
msg=msg.replace(":)","<i class='material-icons dp48'>insert_emoticon</i>");
msg=msg.replace(":(","<i class='material-icons dp48'>mood_bad</i>");
msg=msg.replace("<3","<i class='material-icons dp48'>favorite</i>");
$("#all_chat").append(msg);
$('div[data-id="'+all_msg[0].id_chat+'"]').addClass("div_msg_new");
set_l_s_by_name("last_id_chat",all_msg[0].id_chat);
last_id_chat=all_msg[0].id_chat;
var objDiv = document.getElementById("all_chat");
objDiv.scrollTop = objDiv.scrollHeight;
}
}
var img_capt_def="images/img_capt.jpg";
$(".img_question_cap").find("img").attr("src",img_capt_def);
$(".img_question_cap").find("span").text(" Joindre l'image de question");
$(".img_question_cap").attr("data-active","0");
// alert("envoyer");
// ->
})
.fail(function() {
var $toastContent = $("<span > Impossible d'envoyer le message ! !</span>");
Materialize.toast($toastContent, 3000,"alert-danger","top");
})
.always(function() {});
}
/* */
});
//----------------------
});
</script>
</body>
</html>
Zerion Mini Shell 1.0