Alerts einblenden ausblenden basierend auf Benutzerantwort

Question

Hier ist die Plunker Link für die unten genannten Anforderungen:

https://plnkr.co/edit/Ae8Pit3sFqvnM9gat0za?p=preview

HTML

<a href="#" class="alertsBadge" id="alertsBadge" data-badge=""><span class="fa fa-bell">Alerts</span></a> 
<div id="alerts" style="display:none;"> 
    <div id="successBanner" style="display:none;">Your response has been saved</div><br/> 
    <form> 
    <div id="shouldRead">You should answer the following:</div><br/> 
    <div class="alertHolder"> 
     <div>Your gender?</div> 
     <input type="radio" name="gender" value="male"> Male<br> 
     <input type="radio" name="gender" value="female"> Female<br> 
    </div><br/> 
    <div class="alertHolder"> 
     <div>You smoke??</div> 
     <input type="radio" name="smoke" value="Yes"> Yes<br> 
     <input type="radio" name="smoke" value="No"> No<br> 
    </div><br/> 
    <div class="alertHolder"> 
     <div>You drink??</div> 
     <input type="radio" name="drink" value="Yes"> Yes<br> 
     <input type="radio" name="drink" value="No"> No<br> 
    </div><br/> 
    <input type="submit" onclick="saveAlertResponse(); return false;" /> 

JS

// Code goes here 
$(document).ready(function() { 
    showAlerts(); 
}); 

function showAlerts(){ 
    setTimeout(function(){ 
    $('#alerts').show("fast",function(){ 
     setTimeout(function(){ 
     $("#alerts").hide(); 
     $(".alertsBadge").attr("data-badge","2"); 
     }, 10000); 
    }); 
    }, 10000); 
    $(".alertsBadge").click(function(){ 
    $("#alerts").toggle(); 
    }); 
} 

function saveAlertResponse(){ 
    $("#alerts input[type='radio']:checked").closest('.alertHolder').hide(); 
    $("#successBanner").show(); 
} 

Anforderungen sind als folgt:

1. Auf der ersten Seite laden, sollte die Alerts Div nach 2 Minuten öffnen/anzeigen. A) Szenario 1: Wenn der Benutzer auf keine der Fragen antwortet i. Es sollte sich nach 2 Minuten verstecken und in 2 Minuten wieder erscheinen und weitermachen, wenn er nicht antwortet ii. Wenn es ausgeblendet wird, sollte das Abzeichen oben auf der Warnung die Anzahl der unbeantworteten Fragen anzeigen. B) Szenario 2: Wenn der Benutzer auf eine der Fragen antwortet i. Die Frage, auf die geantwortet wurde, sollte sich beim Klick auf Speichern verstecken und ein Banner sollte oben erscheinen und "Antwort gespeichert" anzeigen. Danach sollte sich das gesamte Alert-Div in zehn Sekunden verstecken und das Badge oberhalb des Alerts sollte die Anzahl der unbeantworteten Fragen anzeigen. ii. Erneut sollte der Alarm nach 2 Minuten angezeigt werden, wenn eine der Fragen unbeantwortet ist. iii. Div mit ID sollte lesen sollte auch verschwinden. Wenn er alle Fragen beantwortet, sollte Banner oben "Antwort gespeichert" erscheinen. Danach, in zehn Sekunden, sollte sich das gesamte Alert-Div verstecken und das Abzeichen oberhalb des Alerts sollte verschwinden.
2. Jedes Mal, wenn der Alarm "Antwort gespeichert"

Answer 1

dieses

$(document).ready(function() { 
    var interval = 0; 
    var form_submitted = false; 
    var periodic_interval_check; 


$(".alertsBadge").click(function(){ 
    $("#alerts form").show(); 
    $("#alerts").toggle(); 

    if($("#alerts:visible").length==1){ 
     periodic_interval_check = setInterval(updateDiv,1000); 
    }else{ 
    clearInterval(periodic_interval_check) 
    } 

}); 

function updateDiv(){ 
    var answered = check_answered_count() 
    var unanswered = 3 - check_answered_count() 


    if(interval == 120 && form_submitted){ 
     /* if intervall reaches 2 the user is inactive hide element/s */ 

     alert('Form Submitted:: Answered:'+ answered +' unanswered:' + unanswered) 
     $("#successBanner").show(); 
     $("#alerts form").hide(); 

     clearInterval(periodic_interval_check) 
    } 
    else if(interval == 120 && !form_submitted){ 
     alert('Form Not Submitted:: Answered:'+ answered +' unanswered:' + unanswered) 
     interval = 0; 
     /* restart once again */ 
     $("#alerts").hide(); 
     if($("#alerts:hidden").length==1){ 
     clearInterval(periodic_interval_check) 
     } 


    } 
    interval = interval+1; 
    console.log(interval); 
} 

function saveAlertResponse(){ 
    form_submitted = true 
    var answered = check_answered_count() 
    var unanswered = 3 - check_answered_count() 
    if(check_answered_count()==3){ 
    clearInterval(periodic_interval_check) 
    $("#successBanner").show(); 
    $("#alerts form").hide(); 
    }else{ 
    $("#alerts form").hide(); 
    } 
    interval = 0; 
    alert('Form Submitted:: Answered:'+ answered +' unanswered:' + unanswered) 
} 


function check_answered_count(){ 
    return $("#alerts input[type='radio']:checked").length 
} 

$("form").on("submit", function(e){ 
    e.preventDefault(); 
    saveAlertResponse() 
}) 

}); 

Versuchen eröffnet