...

View Full Version : Ho to add lines, similar to a tree menu



ubap123
01-07-2010, 11:43 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Call Flow</title><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<script type = "text/javascript">

function showAss(){
document.getElementById("s1").style.display="none";
document.getElementById("s2").style.display="none";
document.getElementById("s3").style.display="none";
document.getElementById("s4").style.display="none";
if (document.getElementById("process").checked) {
document.getElementById("s1").style.display="block";
document.getElementById("s2").style.display="block";
document.getElementById("s3").style.display="block";
document.getElementById("s4").style.display="block";
}
}

function showRebs(){
document.getElementById("reb1").style.display="none";
document.getElementById("reb2").style.display="none";
document.getElementById("reb3").style.display="none";
document.getElementById("reb4").style.display="none";
document.getElementById("reb5").style.display="none";
if (document.getElementById("rebuttals").checked) {
document.getElementById("reb1").style.display="block";
document.getElementById("reb2").style.display="block";
document.getElementById("reb3").style.display="block";
document.getElementById("reb4").style.display="block";
document.getElementById("reb5").style.display="block";
}
}

function showCancel(){
document.getElementById("tae").style.display="none";
if (document.getElementById("chk2").checked) {
document.getElementById("tae").style.display="block";
}
}

function showTech(){
document.getElementById("t1").style.display="none";
document.getElementById("t2").style.display="none";
if (document.getElementById("chk3").checked) {
document.getElementById("t1").style.display="block";
document.getElementById("t2").style.display="block";
}
}

function showBill(){
document.getElementById("b1").style.display="none";
document.getElementById("b2").style.display="none";
if (document.getElementById("chk4").checked) {
document.getElementById("b1").style.display="block";
document.getElementById("b2").style.display="block";
}
}

function showGen(){
document.getElementById("g1").style.display="none";
document.getElementById("g2").style.display="none";
if (document.getElementById("chk5").checked) {
document.getElementById("g1").style.display="block";
document.getElementById("g2").style.display="block";
}
}

function showSev1(){
document.getElementById("c1").style.display="none";
document.getElementById("c2").style.display="none";
document.getElementById("sing").style.display="none";
if (document.getElementById("sr1").checked) {
document.getElementById("c1").style.display="block";
document.getElementById("c2").style.display="block";
document.getElementById("sing").style.display="block";
}
}

function showReq(){
document.getElementById("r1").style.display="none";
if (document.getElementById("can1").checked) {
document.getElementById("r1").style.display="block";
}
}

function showSev2(){
document.getElementById("sev2").style.display="none";
document.getElementById("sing").style.display="none";
if (document.getElementById("sr2").checked) {
document.getElementById("sev2").style.display="block";
document.getElementById("sing").style.display="block";

}
}

function showTechClose(){
document.getElementById("sing").style.display="none";
if (document.getElementById("tech1").checked) {
document.getElementById("sing").style.display="block";
}
}

function showTechClose1(){
document.getElementById("sing").style.display="none";
if (document.getElementById("tech2").checked) {
document.getElementById("sing").style.display="block";
}
}

function showBillClose(){
document.getElementById("sing").style.display="none";
if (document.getElementById("bill1").checked) {
document.getElementById("sing").style.display="block";
}
}

function showBillClose1(){
document.getElementById("sing").style.display="none";
if (document.getElementById("gen2").checked) {
document.getElementById("sing").style.display="block";
}
}

function showGenClose(){
document.getElementById("sing").style.display="none";
if (document.getElementById("gen1").checked) {
document.getElementById("sing").style.display="block";
}
}

function showGenClose1(){
document.getElementById("sing").style.display="none";
if (document.getElementById("gen2").checked) {
document.getElementById("sing").style.display="block";
}
}

function showManda(){
alert("Provide Appropriate Rebuttals");
alert("If refund was issued, PROVIDE MANDATORY SPIEL");

}

function showManda2(){
alert("Provide Appropriate Rebuttals");
alert("We can only provide a maximum of 6 recurring charges");
alert("PROVIDE MANDATORY SPIEL");
}

function showNoRefund(){
alert("Cancel Recurring Service");
}

function showS2(){
alert("Inform customer of what they will be lossing");
alert("PROVIDE MANDATORY SPIEL");
}


function showNext() {
var cbs=zxcByClassName('chk')
for (var z0=0;z0<cbs.length;z0++){
if (!cbs[z0].checked){
for (var z0a=z0;z0a<cbs.length;z0a++){
cbs[z0a].checked=false;
}
break;
}
}
for (var z1=0;z1<cbs.length;z1++){
if (cbs[z1+1]){
cbs[z1+1].parentNode.style.display=cbs[z1].checked?'block':'none';
}
}
}

function zxcByClassName(nme,el,tag){
if (typeof(el)=='string') el=document.getElementById(el);
el=el||document;
for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)) ary.push(els[z0]);
}
return ary;
}


<!--

function get_check_value()
{
var c_value = "";
for (var i=0; i < document.callflow.flow.length; i++)
{
if (document.callflow.flow[i].checked)
{
c_value = c_value + document.callflow.flow[i].value + "\n";
}
}
c_value = "You did the following steps:\n" + c_value;
alert(c_value);
return false;
}

//-->

</script>
<style type="text/css">
<!--
.style1 {font-family: Geneva, Arial, Helvetica, sans-serif}
-->
</style>
</head>
<body>

<h1 align="left" class="style1">Call Flow</h1>
<blockquote>
<p><br>
<form name="callflow" action="">

<span>
<input type = "checkbox" class = "chk" onclick = "showNext()" name = "flow2" value="Answered Call" />
<strong><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Begin Call</font></strong> </span>
<br>

<blockquote>
<span style="display:none ">
<input type = "checkbox" class = "chk" onclick = "showNext()" name = "flow" value="Delivered Opening Spiel"><strong><font face="Verdana, Arial, Helvetica, sans-serif" size="2">&nbsp>Opening Spiel</font></strong>
<blockquote>
<em><font face="Arial" size="-2">"Deliver Opening Spiel"</font></em>
</blockquote>
</span>
</blockquote>


<blockquote>
<span style="display:none ">
<input type = "checkbox" class = "chk" onclick = "showNext()" name="flow" value="Smart Paraphrase">
<strong><font face="Verdana, Arial, Helvetica, sans-serif" size="2">&nbsp>Smart Paraphrase</font></strong>
<blockquote>
<em><font face="Arial" size="-2">"Empathize, Assure, and Set Expectations"</font></em>
</blockquote>
</span>
</blockquote>

<blockquote>
<span style="display:none ">
</strong> <input type = "checkbox" class = "chk" onclick = "showNext()" name="flow" value="Verified Customer">
<strong><font face="Verdana, Arial, Helvetica, sans-serif" size="2">&nbsp>Verification</font></strong>
<blockquote>
<em><font face="Arial" size="-2">"Ask customer if they have and existing ticket number; if YES then ask for 1 information; if NO then verify 2 information"</font></em>
</blockquote>
</span>
</blockquote>


<blockquote>
<span style="display:none">
<input type = "checkbox" class = "chk" onclick = "showAss()" name="flow" value="Proceed With Assistance" id="process">
<strong><font face="Verdana, Arial, Helvetica, sans-serif" size="2">&nbsp>Proceed with Assistance</font></strong>
<blockquote>
<em><font face="Arial" size="-2">"You have verified the customer's records, proceed with the customer's inquiry."</font></em>
</blockquote>
</span>
</blockquote>

<blockquote> <blockquote>
<span style="display:none" id="s1">
<input type="checkbox" id="chk2" name="flow" value="Cancellation" onclick="showCancel()"/>
<strong><font face="Verdana, Arial, Helvetica, sans-serif" size="2">&nbsp>Cancellation</font></strong></font> </span>
<span id="tae" style="display:none">
<input type="checkbox" id="sr1" name="flow" value="S1" onclick="showSev1()"/><strong><font face="Arial" size="-1">&nbsp>Severity Level 1</font></strong> <input type="checkbox" id="sr2" name="flow" value="s2" onclick="showSev2()"/><strong><font face="Arial" size="-1">&nbsp>Severity Level 2</font></strong>
</span>
</blockquote>
</blockquote>

<blockquote>
<span style="display:none" id="c1">
<input type="checkbox" id="can1" name="flow" value="Requested for a Refund" onclick="showReq()"/>
<strong><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Requested for a REFUND</font></strong>
</span>
</blockquote>

<blockquote><blockquote>
<span style="display:none" id="r1">
<input type="checkbox" id="ref1" name="flow" value="Provided Refund" onclick="showNext()"/><strong><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Account is Beyond the 7 Day Guarantee</font></strong>

<blockquote>
<span style="display:none" id="rebuttal">
<input type = "checkbox" class="chk" name="flow" onclick="showRebs()" value="Provide Rebuttals" id="rebuttals">
<strong><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Provide rebuttals</font></strong>
</span>
</blockquote>

<blockquote><blockquote>
<span style="display:none" id="reb1">
<input type = "checkbox" class="chk" name="flow" value="F&B">
<strong><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Feature and Benefits</font></strong>
</span>


<span style="display:none" id="reb2">
<input type = "checkbox" class="chk" name="flow" value="Cancellation of X sales">
<strong><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Cancellation of X sales</font></strong>
</span>

<span style="display:none" id="reb3">
<input type = "checkbox" class="chk" name="flow" value="Downgrade of Membership">
<strong><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Downgrade the Membership</font></strong>
</span>


<span style="display:none" id="reb4">
<input type = "checkbox" class="chk" name="flow" value="Technical Support">
<strong><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Offered Technical Support</font></strong>
</span>
</blockquote></blockquote>


<blockquote>
<span style="display:none" id="reb5">
<input type = "checkbox" class="chk" name="flow" value="Mandatory Spiel">
<strong><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Mandatory Spiel</font></strong>
<br><br>
<em><font face="arial" size="1">"I have successfully processed your request for refund and you will receive an email confirmation regarding it. Your bank might take a few days to post it on your statement. (If customers ask how many days, agent will say 5 to 10 business days)</font></em>
</span>
</blockquote>
<input type="checkbox" id="ref2" name="flow" value="Provided Refund" onclick="showManda()"/><strong><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Account is Within the 7 Day Guarantee</font></strong>
</span>
</blockquote></blockquote>


<blockquote>
<span style="display:none" id="c2">
<input type="checkbox" id="can2" name="flow" value="No Refund Provided, Cancelled Recurring Service" onclick="showNoRefund()"/>
<strong><font face="Verdana, Arial, Helvetica, sans-serif" size="1">No Refund</font></strong>
</span>
</blockquote>

<blockquote>
<span style="display:none" id="sev2">
<input type="checkbox" id="sl2" name="flow" value="No Refund Provided, Cancelled Recurring Service" onclick="showS2()"/>
<strong><font face="Verdana, Arial, Helvetica, sans-serif" size="1">
Process Customer Request</font></strong>
</span>
</blockquote>


<blockquote> <blockquote>
<span style="display:none" id="s2">
<input type="checkbox" id="chk3" name="flow" value="Technical Assistance" onclick="showTech()"/>
<strong><font face="Verdana, Arial, Helvetica, sans-serif" size="2">&nbsp>Technical</font></strong>
</span>
</blockquote>
</blockquote>

<blockquote>
<span style="display:none" id="t1">
<input type="checkbox" id="tech1" name="flow" value="Technical Support" onclick="showTechClose()"/>
<strong><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Provide Technical Assistance</font></strong>
</span>
</blockquote>

<blockquote>
<span style="display:none" id="t2">
<input type="checkbox" id="tech2" name="flow" value="Escalated to L2" onclick="showTechClose1()"/>
<strong><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Escalated to Level 2 Support</font></strong> </span>
</blockquote>


<blockquote> <blockquote>
<span style="display:none" id="s3">
<input type="checkbox" id="chk4" name="flow" value="Billing" onclick="showBill()"/>
<strong><font face="Verdana, Arial, Helvetica, sans-serif" size="2">&nbsp>Billing</font></strong> </span>
</blockquote>
</blockquote>

<blockquote>
<span style="display:none" id="b1">
<input type="checkbox" id="bill1" name="flow" value="Billing Concern" onclick="showBillClose()"/>
<strong><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Called in for the Charges</font></strong>
</span>
</blockquote>

<blockquote>
<span style="display:none" id="b2">
<input type="checkbox" id="bill2" name="flow" value="Doesnt want it Cancellation" onclick="showBillClose1()" />
<strong><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Wanted to Cancel</font></strong> </span>
</blockquote>

<blockquote><blockquote>
<span style="display:none" id="s4">
<input type="checkbox" id="chk5" name="flow" value="General Inquiry" onclick="showGen()"/>
<strong><font face="Verdana, Arial, Helvetica, sans-serif" size="2">&nbsp>General Inquiry</font></strong> </span>
</blockquote>
</blockquote>

<blockquote>
<span style="display:none" id="g1">
<input type="checkbox" id="gen1" name="flow" value="Upsell" onclick="showGenClose()"/>
<strong><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Upsell</font></strong>
</span>
</blockquote>

<blockquote>
<span style="display:none" id="g2">
<input type="checkbox" id="gen2" name="flow" value="Decline Sale" onclick="showGenClose1()" />
<strong><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Non Member</font></strong> </span>
</blockquote>


<span style="display:none" id="sing">
<input type="checkbox" id="closing" name="flow" value="End Call"/>
<strong><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Closing</font></strong> </span>
<br>
<input type="submit" onclick="get_check_value()" name="button"></br>
</form>

</body>

</html>



Thanks.:D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum