在我的页面中:https://rafiee.net/q,我有以下html代码(Link to webpage):
<title>Normal Distribution Applet/Calculator</title>
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="../favicon.png" type="image/png" />
<link type="text/css" rel="stylesheet" href="/wp-content/themes/astra-child/css/style.css">
<script src="/wp-content/themes/astra-child/js/common.js"></script>
<script src="/wp-content/themes/astra-child/js/jstat.min.js"></script>
<script src="/wp-content/themes/astra-child/js/normaldist.object.js"></script>
<script src='https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1","packages":["corechart"]}]}'>
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
//MathJax.Hub.Config({
// "HTML-CSS": {
// availableFonts: [], preferredFont: null, // force Web fonts
// webFont: "STIX-Web"
// }
//});
</script>
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML.js">
</script>
<script src="/wp-content/themes/astra-child/js/jquery.js"></script>
<script src="/wp-content/themes/astra-child/js/jquery.tools.min.js"></script>
<script>
// Help Panel
$(document).ready(function(){
$("#flip1").click(function(){
$("#panel1").slideToggle("fast");
});
});
// Tooltip
$(function() {
$("#bulb img[title]").tooltip({
offset: [0, 120],
effect: 'fade'
// add dynamic plugin with optional configuration for bottom edge
}).dynamic({ bottom: { direction: 'down', bounce: true } });
});
// Google Analytics
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-110195266-1']);
_gaq.push(['_trackPageview']);
(function()
{
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') +
'.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
}
)();
// Load the Visualization API
google.charts.load("current", {packages:["corechart"]});
$(document).ready(function(){
$("input").change(function(){
//alert("The text has been changed.");
});
});
</script>
</head>
<body onload="
norm = new normalDistribution(0,1);
norm.printPdf('','less');
norm.printMoments();">
<h3>Normal Distribution<br>$X \sim N(\mu, \sigma)$</h3>
<div id="resp-table">
<form NAME="this.form">
<table class="responsive-table">
<tr>
<td>$\mu=$</td>
<td><input TYPE="TEXT" NAME="mu"
VALUE="0"
ONFOCUS="this.form.x.value = '';
this.form.p.value = '';"
ONCHANGE="
if(isNaN(this.form.mu.value))
{
alert('Error: Enter a numeric value');
this.form.mu.value = '';
}
else
{
norm = new normalDistribution(this.form.mu.value, this.form.si.value);
if(!isNaN(this.form.si.value))
{
norm.printPdf(this.form.x.value,this.form.mydropdown.value);
norm.printMoments();
};
};
if(this.form.mu.value != 0) {
mydropdown.options.remove(2);
mydropdown.options.remove(2);
}
if(this.form.mu.value == 0) {
mydropdown.options[2] = new Option('2P(X > |x|) =', 'twotail');
mydropdown.options[3] = new Option('P(-|x| < X < |x|) =', 'twotailinside');
}"
></td>
<td>$\sigma=$</td>
<td><input TYPE="TEXT" NAME="si"
VALUE="1"
ONFOCUS="this.form.x.value = '';
this.form.p.value = '';"
ONCHANGE="
if(isNaN(this.form.si.value))
{
alert('Error: Enter a sigma value > 0');
this.form.si.value = '';
}
else if(eval(this.form.si.value) <= 0)
{
alert('Error: Enter a sigma value > 0');
}
else
{
norm = new normalDistribution(this.form.mu.value, this.form.si.value);
if(!isNaN(this.form.mu.value))
{
norm.printPdf(this.form.x.value, this.form.mydropdown.value);
norm.printMoments();
};
};"
></td>
</tr>
<tr>
<td>$x=$</td>
<td><input TYPE="text" NAME="x"
VALUE=""
ONCLICK="this.form.p.value=''"
ONCHANGE="
if(isNaN(this.form.x.value))
{
alert('Error: Enter a numeric value');
}
else
{
norm = new normalDistribution(this.form.mu.value, this.form.si.value);
norm.printPdf(this.form.x.value, this.form.mydropdown.value);
if(this.form.mydropdown.value == 'less')
this.form.p.value = roundNumber(norm.cdf(this.form.x.value),5);
if(this.form.mydropdown.value == 'greater')
this.form.p.value = roundNumber(1-norm.cdf(this.form.x.value),5);
if(this.form.mydropdown.value == 'twotail')
if(this.form.x.value >= 0)
this.form.p.value = 2*roundNumber(norm.cdf(-this.form.x.value),5);
else
this.form.p.value = 2*roundNumber(norm.cdf(this.form.x.value),5);
if(this.form.mydropdown.value == 'twotailinside')
this.form.p.value = 1-2*roundNumber(norm.cdf(-Math.abs(this.form.x.value)),5);
}
if(this.form.x.value == '') {
this.form.p.value = '';
}
;"
STYLE="background-color: #b2caf6"></td>
<td><select name="mydropdown"
ONCHANGE="this.form.p.value = '';
norm = new normalDistribution(this.form.mu.value, this.form.si.value);
norm.printPdf(this.form.x.value, this.form.mydropdown.value);
if(this.form.mydropdown.value == 'less')
this.form.p.value = roundNumber(norm.cdf(this.form.x.value),5);
if(this.form.mydropdown.value == 'greater')
this.form.p.value = roundNumber(1-norm.cdf(this.form.x.value),5);
if(this.form.mydropdown.value == 'twotail')
if(this.form.x.value >= 0)
this.form.p.value = 2*roundNumber(norm.cdf(-this.form.x.value),5);
else
this.form.p.value = 2*roundNumber(norm.cdf(this.form.x.value),5);
if(this.form.mydropdown.value == 'twotailinside')
this.form.p.value = 1-2*roundNumber(norm.cdf(-Math.abs(this.form.x.value)),5);
if(this.form.x.value == '') {
this.form.p.value = '';
}">
<option value="greater">P(X > x) =</option>
<option value="less">P(X < x) =</option>
<option value="twotail">2P(X > |x|) =</option>
<option value="twotailinside">P(-|x| < X < |x|) =</option>
</select></td>
<td><input TYPE="TEXT" NAME="p"
VALUE=""
ONCLICK="this.form.x.value=''"
ONCHANGE="
if((this.form.p.value<=0) || (this.form.p.value>=1) || isNaN(this.form.p.value))
{
alert('Error: Probability must be between 0 and 1');
this.form.p.value = ''
}
else
{
norm = new normalDistribution(this.form.mu.value, this.form.si.value);
if(this.form.mydropdown.value == 'less')
this.form.x.value = roundNumber(norm.percentile(this.form.p.value),5);
if(this.form.mydropdown.value == 'greater')
this.form.x.value = roundNumber(norm.percentile(1-this.form.p.value),5);
if(this.form.mydropdown.value == 'twotail')
this.form.x.value = -roundNumber(norm.percentile(0.5*this.form.p.value),5);
if(this.form.mydropdown.value == 'twotailinside')
this.form.x.value = -roundNumber(norm.percentile(0.5*(1-this.form.p.value)),5);
norm.printPdf(this.form.x.value, this.form.mydropdown.value);
};"
STYLE="background-color: #e7b0b0"></td>
</tr>
</table>
</form>
</div>
<div id="pdfPlot"></div>
<div>
<p id="moments" class="mathjaxMoments"></p>
</div>
<footer>
<div id="footerleft">
<div id="flip1"><button>Help</button></div>
</div>
<div id="footerright">
<p class='small'>
©2019 Rafiee.net<br>
<br>
</p>
</div>
</footer>
<div id="panel1">
<p>
This applet computes probabilities and percentiles for normal random variables:
$$X \sim N(\mu, \sigma)$$
</p>
<h4>Directions</h4>
<ul>
<li>Enter the mean $\mu$ and standard deviation $\sigma$. </li>
<li>To compute a left-tail probability, select $P(X \lt x)$ from the drop-down box,
enter a numeric $x$ value in the <span style="BACKGROUND-COLOR: #BABAFF">blue</span>
box and press "Tab" or "Enter" on your keyboard. The probability $P(X \lt x)$ will appear in the
<span style="BACKGROUND-COLOR: #FFCCCC">pink</span> box.
Select $P(X \gt x)$ from the drop-down box for a right-tail probability.</li>
<li>To determine a percentile, enter the percentile (e.g. use 0.8 for the 80th percentile) in the
<span style="BACKGROUND-COLOR: #FFCCCC">pink</span>
box, select $P(X \lt x)$ from the drop-down box, and press "Tab" or "Enter" on your keyboard.
The percentile $x$ will appear in the <span style="BACKGROUND-COLOR: #BABAFF">blue</span> box.</li>
</ul>
<p>On the graph, the $x$ value appears in
<span style="BACKGROUND-COLOR: #BABAFF">blue</span>
while the probability is shaded in
<span style="BACKGROUND-COLOR: #FFCCCC">pink</span>.
</p>
<h4>Details</h4>
<ul>
<li>Probability density function
$$f(x)=\frac{1}{\sqrt{2\pi \sigma^2}} e^{-\frac{1}{2\sigma^2}(x-\mu)^2}$$
where $-\infty \lt x \lt \infty$, $-\infty \lt \mu \lt \infty$, and $\sigma \gt 0$</li>
<li>$\mu=E(X)$</li>
<li>$\sigma^2=Var(X)$</li>
<li>$\sigma=SD(X)$</li>
</ul>
</div>
</body>
并跟随Style.css:
/*@font-face { font-family: Roboto; src: url('fonts/Roboto-Regular.ttf'); font-weight:normal;}*/
/*@import url(http://fonts.googleapis.com/css?family=Roboto:400);*/
body {
font-size:100%;
font-family: Arial, Helvetica, sans-serif;
width: 100%;
background-image: url('../backgrounds/cream.png');
}
@-viewport {
zoom: auto;
}
body:before {
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
z-index: 100;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}
input {
border: 1px solid rgb(180,180,180);
border-radius: 2px;
padding: 5px;
background-color: rgb(240,240,240);
margin: 2px 12px 0 0;
width: 70px;
}
select {
margin: 2px 0px 0 0;
}
.tooltip {
font-size:12px;
width:200px;
padding:5px;
margin-top: 40px;
border: 1px solid rgb(180,180,180);
border-radius: 3px;
background-color: #e6e6fa;
}
#bulb img {
cursor:pointer;
margin-left: -10px;
}
img {
margin: auto;
}
button {
background-color: #B2B2B2;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:5px;
border: #FFF;
color: #FFF;
}
#flip1 {
cursor: pointer;
width: 0%;
}
#panel1 {
display:none;
padding: 5px;
border: solid 1px rgb(225,225,225);
border-radius: 3px;
background-color: rgba(0,0,0,0.02);
}
table,td,th {
text-align:right;
margin: auto;
}
h3 {
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.02);
border: solid 1px rgb(225,225,225);
border-radius: 3px;
}
p.mathjaxText {
font-size:100%;
text-align: left;
}
p {
color: black;
}
p.small {
font-size:70%;
font-family:sans-serif;
color: grey;
padding: 0px;
margin-right: 5px;
}
p.mathjaxMoments {
font-size:70%;
font-family:sans-serif;
margin: auto;
text-align: center;
color: rgb(120,120,120);
padding: 15px;
}
p.mathjaxCenter {
font-size:90%;
font-family:courier;
margin-bottom: 0px;
text-align: center;
color: rgb(120,120,120);
}
p.mathjaxCI {
font-size:90%;
font-family:courier;
text-align: center;
color: rgb(120,120,120);
}
div {
padding:0px;
}
div#pmfPlot {
margin-left: 20px;
}
div#pdfPlot {
margin-left: 20px;
}
footer {
background-color: rgba(0,0,0,0.02);
border: solid 1px rgb(225,225,225);
border-radius: 3px;
display: block;
}
#footerleft {
float: left;
padding: 5px;
}
#footerright {
text-align: right;
padding: 5px;
}
ul {
margin-top: -5px;
}
li {
margin-bottom: 3px;
}
div#resp-table{
width:100%;
display: table;
}
@media only screen and (max-width: 768px) {
.responsive-table {
overflow: hidden;
overflow-x: scroll;
display:block;
}
}
我对此代码有三个问题,下面我将在下面列出这些问题:
我先感谢您的帮助。谢谢
因为使用display:table,宽度:100%被忽略。