|
|
| Line 381: |
Line 381: |
| | {{Heidelberg/tools_code | | {{Heidelberg/tools_code |
| | }} | | }} |
| − |
| |
| − | <script type="text/javascript">
| |
| − |
| |
| − | var call = 0;
| |
| − |
| |
| − | //example that contains everything needed
| |
| − | function dummy(){
| |
| − | //get the values
| |
| − | var mr = Number(document.getElementById('mr').value);
| |
| − |
| |
| − | //initialise variables
| |
| − | var a_mutations = 0;
| |
| − |
| |
| − | //calculate
| |
| − | if(phi==0){
| |
| − | a_mutations = ng * mr;
| |
| − | }
| |
| − |
| |
| − | //return the results
| |
| − | $("#amount_mutated").html((Math.round(100000 * a_mutated))/1000);
| |
| − | $("#number_generations").html(ng_out);
| |
| − |
| |
| − | //end the function
| |
| − | return false;
| |
| − | }
| |
| − |
| |
| − | function number_mutations(){
| |
| − |
| |
| − | //get the values
| |
| − | var mr = Number(document.getElementById('mr').value);
| |
| − | var phi = Number(document.getElementById('phi').value);
| |
| − | var ng = Number(document.getElementById('ng').value);
| |
| − | var tt = Number(document.getElementById('tt').value);
| |
| − | var ls = Number(document.getElementById('ls').value);
| |
| − | var ns = Number(document.getElementById('ns').value);
| |
| − | var pm = Number(document.getElementById('pm').value);
| |
| − |
| |
| − | //initialise variables
| |
| − | var a_mutations = 0;
| |
| − | var n_mutations = '?';
| |
| − | var a_mutated = '?';
| |
| − | var ng_out = "";
| |
| − | var number_to_seq_out = "";
| |
| − | var number_to_seq = 0;
| |
| − | var probability_positive_sequencing = ''
| |
| − | var warnings = ""
| |
| − |
| |
| − | //Check, if given values make sense:
| |
| − |
| |
| − | if(mr>1){
| |
| − | warnings += "A mutation rate that is above one mutation per basepair, per generation does not make sense. 100 % should be enough, right? ";
| |
| − | mr = 1;
| |
| − | }
| |
| − |
| |
| − | if(pm>1){
| |
| − | warnings += "A probability of 100 % should be enough, right?. ";
| |
| − | pm = 1;
| |
| − | }
| |
| − |
| |
| − | //calculate
| |
| − |
| |
| − |
| |
| − | if(phi*tt==0){
| |
| − | a_mutations = 1 - Math.pow((1 - mr), ng);
| |
| − | ng_out = "";
| |
| − | }
| |
| − | else{
| |
| − | a_mutations = 1 - Math.pow((1 - mr), tt*phi);
| |
| − | ng = tt*phi;
| |
| − | ng_out = "The conditions result in " + ng + " generations.";
| |
| − | }
| |
| − |
| |
| − | n_mutations = ls * a_mutations;
| |
| − | a_mutated = 1 - Math.pow((1-a_mutations), ls);
| |
| − |
| |
| − | if(ns!=0){
| |
| − | probability_positive_sequencing = ns*a_mutated;
| |
| − | $("#probability_positive_sequencing").html("Sequencing " + ns + " sequences results in a " + ((Math.round(probability_positive_sequencing*100))/100) + "% probabiltiy of finding at least one mutated sequence.");
| |
| − | }
| |
| − | else{
| |
| − | $("#probability_positive_sequencing").html("");
| |
| − | }
| |
| − |
| |
| − | if(pm!=0){
| |
| − | number_to_seq = Math.max(1, Math.round((Math.log(1-pm))/(Math.log(1-a_mutated))));
| |
| − | if(isNaN(number_to_seq)){
| |
| − | if(pm==1){
| |
| − | number_to_seq_out = "To be 100 % sure, sequence infinitely many sequences.";
| |
| − | }
| |
| − | else{
| |
| − | number_to_seq_out = "Unluckily we were unable to calculate the number of sequences to sequence to have a " + (pm*100) + "% probability for a positive result.";
| |
| − | }
| |
| − | }
| |
| − | else{
| |
| − | number_to_seq_out = "Sequence " + number_to_seq + " clones to have a " + (pm*100) + " % probability to have at least one mutated under the results.";
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | //return the results
| |
| − | $("#amount_mutations").html((Math.round(1000000 * a_mutations))/10000);
| |
| − | $("#number_mutations").html((Math.round(n_mutations*100))/100);
| |
| − | $("#amount_mutated").html((Math.round(100000 * a_mutated))/1000);
| |
| − | $("#number_generations").html(ng_out);
| |
| − | $("#number_to_seq").html(number_to_seq_out);
| |
| − | $("#warnings_mutations").html(warnings);
| |
| − |
| |
| − |
| |
| − | //end the function
| |
| − | return false;
| |
| − | }
| |
| − |
| |
| − | </script>
| |
| − | <script type="text/javascript">
| |
| − |
| |
| − | function glucosecont(){
| |
| − | glucose('cont');
| |
| − | }
| |
| − | function glucosecont_lagoon(){
| |
| − | glucose('cont_lagoon');
| |
| − | }
| |
| − | function glucosecont_forward(){
| |
| − | glucose('cont_forward');
| |
| − | }
| |
| − |
| |
| − |
| |
| − | function glucosedis(){
| |
| − | glucose('dis');
| |
| − | }
| |
| − | function glucosedisnew(){
| |
| − | glucose('disnew');
| |
| − | }
| |
| − |
| |
| − | function glucosedis_forward(){
| |
| − | glucose('disforward');
| |
| − | }
| |
| − | function glucosedisnew_forward(){
| |
| − | glucose('disnewforward');
| |
| − | }
| |
| − |
| |
| − | </script>
| |
| − | <script type="text/javascript">
| |
| − | console.log('alive');
| |
| − |
| |
| − | function glucose(mode){
| |
| − | //get the values
| |
| − | var cturbidostat = Number(document.getElementById('cturbidostat').value);
| |
| − | var cturbidostatmol = Number(document.getElementById('cturbidostatmol').value);
| |
| − | var fr = Number(document.getElementById('fr').value);
| |
| − | var ectiterod = Number(document.getElementById('ectiterod').value);
| |
| − | var ectiterdw = Number(document.getElementById('ectiterdw').value);
| |
| − | var q = Number(document.getElementById('q').value);
| |
| − | var te = Number(document.getElementById('te').value);
| |
| − | var gluc_time = Number(document.getElementById('gluc_time').value);
| |
| − | var ec0dw = Number(document.getElementById('ec0dw').value);
| |
| − | var ec0od = Number(document.getElementById('ec0od').value);
| |
| − | var vl = Number(document.getElementById('vl').value);
| |
| − | var phil = Number(document.getElementById('phil').value);
| |
| − | var cmaxod = Number(document.getElementById('cmaxod').value);
| |
| − | var cmaxdw = Number(document.getElementById('cmaxdw').value);
| |
| − | var logistic = document.getElementById("logistic").checked;
| |
| − |
| |
| − | //initialise variables
| |
| − | var glucoseout = "";
| |
| − | var frl = 0;
| |
| − | var glucosemedium = 0;
| |
| − | var gl_OD = 0.36;
| |
| − |
| |
| − | frl = phil*60/vl;
| |
| − |
| |
| − | if(ectiterdw == 0){
| |
| − | ectiterdw = ectiterod * gl_OD;
| |
| − | }
| |
| − | else{
| |
| − | ectiterod = ectiterdw/gl_OD;
| |
| − | }
| |
| − |
| |
| − | if(cturbidostatmol != 0){
| |
| − | cturbidostat = cturbidostatmol * 180.1559/1000.0;
| |
| − | }
| |
| − | else{
| |
| − | cturbidostatmol = cturbidostat/(180.1559/1000.0);
| |
| − | }
| |
| − |
| |
| − | if(te != 0){
| |
| − | fr = 60.0 * Math.LN2/te;
| |
| − | }
| |
| − | else{
| |
| − | te = fr * Math.LN2/60.0;
| |
| − | }
| |
| − |
| |
| − | if(ec0dw == 0){
| |
| − | ec0dw = ec0od * gl_OD;
| |
| − | }
| |
| − | else{
| |
| − | ec0od = ec0dw/gl_OD;
| |
| − | }
| |
| − |
| |
| − | if(cmaxdw == 0){
| |
| − | cmaxdw = cmaxod * gl_OD;
| |
| − | }
| |
| − | else{
| |
| − | cmaxod = cmaxdw/gl_OD;
| |
| − | }
| |
| − |
| |
| − | if(mode == 'cont'){
| |
| − | //calculate
| |
| − | glucosemedium = cturbidostat + ((ectiterdw * q)/fr);
| |
| − |
| |
| − | var glucosemediummol = glucosemedium/(180.1559/1000.0);
| |
| − |
| |
| − | //return the results
| |
| − | glucoseout =
| |
| − | "With a <b>glucose concentration of " +
| |
| − | (0.01*Math.round(100*glucosemedium)) +
| |
| − | " g/L, " +
| |
| − | (0.01*Math.round(100*glucosemediummol)) +
| |
| − | "mmol/l in the medium</b>, a flow rate of " +
| |
| − | (0.01*Math.round(100*fr)) +
| |
| − | " Volumes/h, or a generation time of " +
| |
| − | Math.round(te) +
| |
| − | " min, an <i>E. coli</i> titer of " + (0.01*Math.round(100*ectiterdw)) +
| |
| − | " g/l, an OD600 of " +
| |
| − | (0.01*Math.round(100*ectiterod)) +
| |
| − | " and a degradation rate of " +
| |
| − | (0.01*Math.round(100*q)) +
| |
| − | " g l<sup>-1</sup>cfu<sup>-1</sup>h<sup>-1</sup> a concentration of " +
| |
| − | (0.01*Math.round(100*cturbidostat)) +
| |
| − | " g/L, "
| |
| − | + (0.01*Math.round(100*cturbidostatmol)) +
| |
| − | " mmol/l is maintained.";
| |
| − |
| |
| − | $("#glucoseplot").html('');
| |
| − |
| |
| − | }
| |
| − | else if(mode=='cont_lagoon'){
| |
| − | glucosemedium_lagoon = cturbidostat + ((ectiterdw * q)/fr) + ((ectiterdw * q)/fr);
| |
| − |
| |
| − | glucose_turbidostat = glucosemedium_lagoon - ((ectiterdw * q)/fr);
| |
| − |
| |
| − | var glucose_turbidostat_mol = glucose_turbidostat/(180.1559/1000.0);
| |
| − |
| |
| − | var glucosemedium_lagoon_mol = glucosemedium_lagoon/(180.1559/1000.0);
| |
| − |
| |
| − | //return the results
| |
| − | glucoseout =
| |
| − | "With a <b>glucose concentration of " +
| |
| − | (0.01*Math.round(100*glucosemedium_lagoon)) +
| |
| − | " g/l, " +
| |
| − | (0.01*Math.round(100*glucosemedium_lagoon_mol)) +
| |
| − | "mmol/l in the medium</b>, a turbidostat flow rate of " +
| |
| − | (0.01*Math.round(100*fr)) +
| |
| − | " Volumes/h, or a generation time of " +
| |
| − | Math.round(te) +
| |
| − | " min, a lagoon with a volume of " +
| |
| − | vl +
| |
| − | " ml and a flow rate of " +
| |
| − | phil +
| |
| − | " ml/min, an <i>E. coli</i> titer of " + (0.01*Math.round(100*ectiterdw)) +
| |
| − | " g/l, an OD600 of " +
| |
| − | (0.01*Math.round(100*ectiterod)) +
| |
| − | " and a degradation rate of " +
| |
| − | (0.01*Math.round(100*q)) +
| |
| − | " g l<sup>-1</sup>cfu<sup>-1</sup>h<sup>-1</sup> a concentration of " +
| |
| − | (0.01*Math.round(100*cturbidostat)) +
| |
| − | " g/L, "
| |
| − | + (0.01*Math.round(100*cturbidostatmol)) +
| |
| − | " mmol/l in the lagoon is maintained. Under this conditions the <b>in the turbidostat the glucose concentration is " +
| |
| − | (0.01*Math.round(100*glucose_turbidostat)) +
| |
| − | "g/l, " +
| |
| − | (0.01*Math.round(100*glucose_turbidostat_mol)) +
| |
| − | " mmol/l.</b>"
| |
| − | ;
| |
| − |
| |
| − | $("#glucoseplot").html('');
| |
| − |
| |
| − | }
| |
| − | else if(mode=='cont_forward'){
| |
| − | glucosemedium_lagoon = Math.max(0, cturbidostat - ((ectiterdw * q)/fr) - ((ectiterdw * q)/fr));
| |
| − |
| |
| − | glucose_turbidostat = Math.max(0, cturbidostat - ((ectiterdw * q)/fr));
| |
| − |
| |
| − | var glucose_turbidostat_mol = glucose_turbidostat/(180.1559/1000.0);
| |
| − |
| |
| − | var glucosemedium_lagoon_mol = glucosemedium_lagoon/(180.1559/1000.0);
| |
| − |
| |
| − | //return the results
| |
| − | glucoseout =
| |
| − | "With a glucose concentration of " +
| |
| − | (0.01*Math.round(100*cturbidostat)) +
| |
| − | " g/l, " +
| |
| − | (0.01*Math.round(100*cturbidostatmol)) +
| |
| − | "mmol/l in the medium</b>, a turbidostat flow rate of " +
| |
| − | (0.01*Math.round(100*fr)) +
| |
| − | " Volumes/h, or a generation time of " +
| |
| − | Math.round(te) +
| |
| − | " min, a lagoon with a volume of " +
| |
| − | vl +
| |
| − | " ml and a flow rate of " +
| |
| − | phil +
| |
| − | " ml/min, an <i>E. coli</i> titer of " + (0.01*Math.round(100*ectiterdw)) +
| |
| − | " g/l, an OD600 of " +
| |
| − | (0.01*Math.round(100*ectiterod)) +
| |
| − | " and a degradation rate of " +
| |
| − | (0.01*Math.round(100*q)) +
| |
| − | " g l<sup>-1</sup>cfu<sup>-1</sup>h<sup>-1</sup> <b>a concentration of " +
| |
| − | (0.01*Math.round(100*glucosemedium_lagoon)) +
| |
| − | " g/L, "
| |
| − | + (0.01*Math.round(100*glucosemedium_lagoon_mol)) +
| |
| − | " mmol/l in the lagoon</b> is maintained. Under this conditions the <b>in the turbidostat the glucose concentration is " +
| |
| − | (0.01*Math.round(100*glucose_turbidostat)) +
| |
| − | "g/l, " +
| |
| − | (0.01*Math.round(100*glucose_turbidostat_mol)) +
| |
| − | " mmol/l.</b>"
| |
| − | ;
| |
| − |
| |
| − | $("#glucoseplot").html('');
| |
| − |
| |
| − | }
| |
| − | else{
| |
| − | if(mode.endsWith('forward')){
| |
| − | glucosemedium = cturbidostat;
| |
| − | if(logistic){
| |
| − | cturbidostat = Math.max(0, glucosemedium - q * ((te * cmaxdw)/Math.LN2) * Math.log((1+(((ec0dw/cmaxdw) * Math.exp(Math.LN2 * gluc_time/te))))/1+(ec0dw/cmaxdw))); }
| |
| − | else{
| |
| − | cturbidostat = Math.max(0, glucosemedium - q * ec0dw * te * (Math.exp(Math.LN2 * gluc_time/te) - 1));
| |
| − | }
| |
| − | }
| |
| − | else{
| |
| − | if(logistic){
| |
| − | glucosemedium = Math.max(0, cturbidostat + (q * ((te * cmaxdw)/Math.LN2) * Math.log((1 + ((ec0dw/cmaxdw) * Math.exp(Math.LN2 * gluc_time/te)))/(1 + (ec0dw/cmaxdw)))));
| |
| − | }
| |
| − | else{
| |
| − | glucosemedium = Math.max(0, cturbidostat + q * ec0dw * te * (Math.exp(Math.LN2 * gluc_time/te) - 1));
| |
| − | }
| |
| − | }
| |
| − | var glucosemediummol = glucosemedium/(180.1559/1000.0);
| |
| − |
| |
| − | var od_warning = "";
| |
| − | var end_od = ec0od * Math.exp(Math.LN2 * gluc_time/te);
| |
| − | if(end_od > 1.0){
| |
| − | if(!logistic){
| |
| − | od_warning = "<br><br><strong>Warning:</strong> With an OD of " + end_od + " the <i>E. coli</i> are not in exponential phase at the end of the experiment. This model is designed for applications with E. coli in exponential phase and therfore assumes exponential growth. The glucose consumption is overestimated as well as the concentration in the medium needed to reach the desired concentration.";
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | //return the results
| |
| − | glucoseout = "With a glucose concentration of "
| |
| − | + (0.01*Math.round(100*Math.max(0,glucosemedium)))
| |
| − | + " g/L, "
| |
| − | +(0.01*Math.round(100*Math.max(0,glucosemediummol)))
| |
| − | + "mmol/l in the medium, a generation time of " + (0.01*Math.round(100*te))
| |
| − | + " min, an <i>E. coli</i> starting titer of "
| |
| − | + (0.01*Math.round(100*ec0dw))
| |
| − | + " g/l, an OD600 of "
| |
| − | + (0.01*Math.round(100*ec0od))
| |
| − | + " and a degradation rate of "
| |
| − | + (0.0001*Math.round(10000*q))
| |
| − | + " g l<sup>-1</sup>cfu<sup>-1</sup>h<sup>-1</sup> a <b>concentration of "
| |
| − | + (0.01*Math.round(100*cturbidostat))
| |
| − | + " g/L, "
| |
| − | + (0.01*Math.round(100* cturbidostatmol))
| |
| − | + " mmol/l</b> is reached after "
| |
| − | + gluc_time
| |
| − | + " minutes."
| |
| − | + od_warning;
| |
| − | if(logistic){
| |
| − | glucoseout += " This calculation assumed logistic growth with a maximum capacity of OD600 = "
| |
| − | + cmaxod
| |
| − | + ", "
| |
| − | + cmaxdw
| |
| − | + " g/L dryweight.";
| |
| − | }
| |
| − | else{
| |
| − | glucoseout += " This calculation assumed exponential growth.";
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | $("#glucoseout").html(glucoseout);
| |
| − |
| |
| − | //plot glucose concentration and e. coli titer
| |
| − | if(mode.startsWith('dis')){
| |
| − | if(mode.startsWith('disnew')){
| |
| − | call = 0;
| |
| − | }
| |
| − | var glucoseplot = document.getElementById('glucoseplot');
| |
| − |
| |
| − | var gluc_time_exp = 1.25 * gluc_time;
| |
| − | var t = new Array(501);
| |
| − | var cecoli = new Array(501);
| |
| − | var cg = new Array(501);
| |
| − |
| |
| − | if(logistic){
| |
| − | for(var it = 0; it <=500; it++){
| |
| − | t[it] = it*gluc_time_exp/500;
| |
| − |
| |
| − | cecoli[it] = Math.max(0, (ec0od * Math.exp(Math.LN2 * t[it]/te))/(1 + (ec0od/cmaxod) * Math.exp(Math.LN2 * (t[it]/te))));
| |
| − |
| |
| − | cg[it] = Math.max(0, glucosemedium - (q * ((te * cmaxdw)/Math.LN2) * Math.log((1 + (ec0dw/cmaxdw) * Math.exp(Math.LN2 * t[it]/te))/(1 + (ec0dw/cmaxdw)))));
| |
| − |
| |
| − | }
| |
| − | }
| |
| − | else{
| |
| − | for(var it = 0; it <=500; it++){
| |
| − | t[it] = it*gluc_time_exp/500;
| |
| − |
| |
| − | cecoli[it] = Math.max(0, ec0od * Math.exp(Math.LN2 * t[it]/te));
| |
| − |
| |
| − | cg[it] = Math.max(0, glucosemedium - (q * ec0dw * te * (Math.exp(Math.LN2 * (t[it]/te)) - 1.0)));
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | var xticks = [0, (gluc_time/4), (2*gluc_time/4), (3*gluc_time/4), (gluc_time), (gluc_time*1.25)];
| |
| − |
| |
| − | var ecolicolors = ['#005493', '#6698BE', '#B2CBDD', '#009193', '#66BDEE', '#B3DEDE'];
| |
| − | var glucosecolors = ['#9D1C20', '#BB5651', '#D89F9C', '#F8991D', '#FBB748', '#FED699'];
| |
| − |
| |
| − | if(cg[0] == 0){
| |
| − | var glucrange = [-0.1, 1.1];
| |
| − | }
| |
| − | else{
| |
| − | var glucrange = [-0.1*cg[0], cg[0]*1.1];
| |
| − | }
| |
| − |
| |
| − | var glucosedata = [{x: t,
| |
| − | y: cg,
| |
| − | name: 'Glucose [g/l] ' + (call+1),
| |
| − | line: {color: glucosecolors[call % glucosecolors.length]},
| |
| − | hoverlabel: {font: {family: 'Josefin Sans'}}
| |
| − | },
| |
| − | {x: t,
| |
| − | y: cecoli,
| |
| − | name: 'E. coli [OD600] ' + (call+1),
| |
| − | yaxis: 'y2',
| |
| − | line: {color: ecolicolors[call % glucosecolors.length]},
| |
| − | hoverlabel: {font: {family: 'Josefin Sans'}}
| |
| − | }];
| |
| − |
| |
| − | var color = '#393939';
| |
| − | var font = {
| |
| − | family: 'Josefin Sans',
| |
| − | size: 18,
| |
| − | color: color
| |
| − | };
| |
| − | var layout = {
| |
| − | title: 'Glucose concentration and phage titer in discontinuous culture',
| |
| − | showlegend: true,
| |
| − | width: 800,
| |
| − | font: font,
| |
| − | legend: {
| |
| − | orientation: 'v',
| |
| − | x: 1.15,
| |
| − | xanchor: 'left',
| |
| − | y: 1
| |
| − | },
| |
| − | xaxis: {
| |
| − | title: 'Duration [min]',
| |
| − | titlefont: font,
| |
| − | showgrid: false,
| |
| − | ticks: 'outside',
| |
| − | ticklen: 2,
| |
| − | tickwidth: 2,
| |
| − | tickfont: font,
| |
| − | tickvals: xticks,
| |
| − | tickmode: 'array',
| |
| − | linecolor: color,
| |
| − | linewidth: 3,
| |
| − | zeroline: false
| |
| − | },
| |
| − | yaxis: {
| |
| − | title: 'Glucose concentration [g/l]',
| |
| − | titlefont: font,
| |
| − | showgrid: false,
| |
| − | ticks: 'outside',
| |
| − | ticklen: 2,
| |
| − | tickwidth: 2,
| |
| − | tickfont: font,
| |
| − | tick0: 0,
| |
| − | dtick: glucrange[1]/7.0,
| |
| − | linecolor: color,
| |
| − | linewidth: 3,
| |
| − | zeroline: false,
| |
| − | range: glucrange
| |
| − | },
| |
| − | yaxis2: {
| |
| − | range: [0.0, Math.min(1.0, cecoli[500])],
| |
| − | title: 'E. coli titer [OD600]',
| |
| − | side: 'right',
| |
| − | overlaying: 'y',
| |
| − | titlefont: font,
| |
| − | showgrid: false,
| |
| − | ticks: 'outside',
| |
| − | ticklen: 2,
| |
| − | tickwidth: 2,
| |
| − | tickfont: font,
| |
| − | tick0: 0,
| |
| − | dtick: cecoli[cecoli.length-1]*1.1/7.0,
| |
| − | linecolor: color,
| |
| − | linewidth: 3,
| |
| − | zeroline: false,
| |
| − | range: [-0.1*cecoli[cecoli.length-1], cecoli[cecoli.length-1]*1.1]
| |
| − | },
| |
| − | shapes: [{
| |
| − | type: 'line',
| |
| − | x0: gluc_time,
| |
| − | x1: gluc_time,
| |
| − | y0: glucrange[0],
| |
| − | y1: glucrange[1],
| |
| − | line:{
| |
| − | width: 2,
| |
| − | color: color,
| |
| − | },
| |
| − | visible: true
| |
| − | }]
| |
| − | };
| |
| − |
| |
| − | if(mode.startsWith('disnew') || call == 0){
| |
| − | Plotly.newPlot(glucoseplot, glucosedata, layout);
| |
| − | call++;
| |
| − | }
| |
| − | else{
| |
| − | Plotly.plot(glucoseplot, glucosedata, layout);
| |
| − | call++;
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | </script>
| |
| − | <script type="text/javascript">
| |
| − |
| |
| − | function differences(){
| |
| − | //get the values
| |
| − | var str1 = document.getElementById('str1').value;
| |
| − | var str2 = document.getElementById('str2').value;
| |
| − | str1 = str1.replace(/(\r\n|\n|\r)/gm,"");
| |
| − | str2 = str2.replace(/(\r\n|\n|\r)/gm,"");
| |
| − |
| |
| − | //initialise variables
| |
| − | var diff = [];
| |
| − | var outstr1 = "";
| |
| − | var outstr2 = "";
| |
| − | var diffs = 0;
| |
| − | var lendiffs = 0;
| |
| − | var sharedlen = 0;
| |
| − | var diffinfo = "";
| |
| − | var str1_comp = str1;
| |
| − | var str2_comp = str2;
| |
| − |
| |
| − | //calculate
| |
| − |
| |
| − | if(document.getElementById("case_sensitive").checked == false){
| |
| − | str1_comp = str1.toLowerCase();
| |
| − | str2_comp = str2.toLowerCase();
| |
| − | }
| |
| − |
| |
| − | var i = 0;
| |
| − | while(i < str1.length){
| |
| − | if(i==str2.length){
| |
| − | break;
| |
| − | }
| |
| − | if(str1_comp[i]==str2_comp[i]){
| |
| − | outstr1 += str1[i];
| |
| − | outstr2 += str2[i];
| |
| − | }
| |
| − | else{
| |
| − | diffs += 1;
| |
| − | outstr1 += '<span style="color: red">' + str1[i] + '</span>';
| |
| − | outstr2 += '<span style="color: red">' + str2[i] + '</span>';
| |
| − | }
| |
| − | i++;
| |
| − | }
| |
| − | sharedlen = i;
| |
| − | while(i < str1.length){
| |
| − | outstr1 = outstr1 + '<span style="color: blue">' + str1[i] + '</span>';
| |
| − | i++;
| |
| − | lendiffs++;
| |
| − | }
| |
| − | while(i < str2.length){
| |
| − | outstr2 = outstr2 + '<span style="color: blue">' + str2[i] + '</span>';
| |
| − | i++;
| |
| − | lendiffs++;
| |
| − | }
| |
| − | diffinfo = "The strings are different for " + diffs + " from " + sharedlen + " positions (" + (0.01*Math.round(10000*(diffs/sharedlen))) + "%)and their length differs by " + lendiffs + " positions.";
| |
| − |
| |
| − | //return the results
| |
| − | $("#outstr1").html(outstr1);
| |
| − | $("#outstr2").html(outstr2);
| |
| − | $("#diffinfo").html(diffinfo);
| |
| − |
| |
| − | //end the function
| |
| − | return false;
| |
| − | }
| |
| − |
| |
| − | </script>
| |
