I recently wrote a custom Qualtrics survey using Javascript and HTML code, which I hope to distribute on mobile devices. Although I can run the survey on an Iphone, when running the survey on an android everything is blank besides the first page (which is an introduction page of text). Does anybody know why this might be happening? I have enable Javascript on the Android but it still won't show. Below are my HTML code:
HTML
<code>
<style>
div.border {
position: absolute;
width: 350px;
height: 475px;
border: 0px solid black;
}
div.labright {
position: absolute;
bottom: 1%;
right: 1%;
line-height: 110%;
font-size: 30px;
font-weight: bold;
text-align: center;
font-family: arial;
}
div.lableft {
position: absolute;
bottom: 1%;
left: 1%;
line-height: 110%;
text-align: center;
font-size: 30px;
font-weight: bold;
font-family: arial;
}
div.load {
position: absolute;
top: 55%;
width: 100%;
display: block;
text-align: center;
font-size: 16px;
font-weight: normal;
font-family: "Times New Roman";
}
div.instruct {
position: absolute;
text-align: center;
bottom: 0%;
font-size: 16px;
font-family: "Times New Roman";
display: none;
line-height: 110%;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
h2.center {
position: absolute;
text-align: center;
width: 100%;
line-height: 100%;
top: 29%;
font-size: 30px;
font-weight: bold;
font-family: arial;
}
p.note {
position: absolute;
text-align: center;
bottom: 1%;
font-size: 16px;
width: 100%;
line-height: 100%;
font-family: "Times New Roman";
}
h2.err {
position: absolute;
display: block;
text-align: center;
width: 100%;
line-height: 100%;
top: 1%;
font-size: 80px;
font-weight: bold;
font-family: arial;
color: red;
}
</style>
<div class="border">
<div class="lableft" id="left">
<br><br>Flowers<br><br>
</div>
<div class="labright" id="right">
<br><br>Insects<br><br>
</div>
<h2 class="center" id="message"><br><br><br>+</h2>
<h2 class="err" id="error"></h2>
<div class="load">
<p id="loading">Loading all the content...
<br>
<br>
This should take less than 1 minute</p>
</div>
<p class="note" id="note"></p>
</div>
<div style="opacity: 0; font-size:300px; color:#fff;"><p>x</p></div>
</code>
Page 1 / 1
Tools like BrowserStack (https://www.browserstack.com/) and W3's HTML validator (https://validator.w3.org) may help you to identify the problem on various browsers and devices.
The paragraph closing tag at the beginning of your code looks like it might need to be removed or paired up with a corresponding opening tag. Something like:
```
<style> div.border { position: absolute; width: 350px; height: 475px; border:
0px solid black; } div.labright { position: absolute; bottom: 1%; right: 1%;
line-height: 110%; font-size: 30px; font-weight: bold; text-align: center;
font-family: arial; } div.lableft { position: absolute; bottom: 1%; left: 1%;
line-height: 110%; text-align: center; font-size: 30px; font-weight: bold;
font-family: arial; } div.load { position: absolute; top: 55%; width: 100%;
display: block; text-align: center; font-size: 16px; font-weight: normal;
font-family: "Times New Roman"; } div.instruct { position: absolute; text-
align: center; bottom: 0%; font-size: 16px; font-family: "Times New Roman";
display: none; line-height: 110%; padding-top: 10px; padding-right: 10px;
padding-bottom: 10px; padding-left: 10px; } h2.center { position: absolute;
text-align: center; width: 100%; line-height: 100%; top: 29%; font-size: 30px;
font-weight: bold; font-family: arial; } p.note { position: absolute; text-
align: center; bottom: 1%; font-size: 16px; width: 100%; line-height: 100%;
font-family: "Times New Roman"; } h2.err { position: absolute; display: block;
text-align: center; width: 100%; line-height: 100%; top: 1%; font-size: 80px;
font-weight: bold; font-family: arial; color: red; } </style>
<div class="border"> <div class="lableft" id="left"> <br><br>Flowers<br><br> </div>
<div class="labright" id="right"> <br><br>Insects<br><br> </div> <h2
class="center" id="message"><br><br><br>+</h2> <h2 class="err"
id="error"></h2> <div class="load"> <p id="loading">Loading all the content...
<br> <br> This should take less than 1 minute</p> </div> <p class="note"
id="note"></p> </div> <div style="opacity: 0; font-size:300px;
color:#fff;"><p>x</p></div>
```
The paragraph closing tag at the beginning of your code looks like it might need to be removed or paired up with a corresponding opening tag. Something like:
```
<style> div.border { position: absolute; width: 350px; height: 475px; border:
0px solid black; } div.labright { position: absolute; bottom: 1%; right: 1%;
line-height: 110%; font-size: 30px; font-weight: bold; text-align: center;
font-family: arial; } div.lableft { position: absolute; bottom: 1%; left: 1%;
line-height: 110%; text-align: center; font-size: 30px; font-weight: bold;
font-family: arial; } div.load { position: absolute; top: 55%; width: 100%;
display: block; text-align: center; font-size: 16px; font-weight: normal;
font-family: "Times New Roman"; } div.instruct { position: absolute; text-
align: center; bottom: 0%; font-size: 16px; font-family: "Times New Roman";
display: none; line-height: 110%; padding-top: 10px; padding-right: 10px;
padding-bottom: 10px; padding-left: 10px; } h2.center { position: absolute;
text-align: center; width: 100%; line-height: 100%; top: 29%; font-size: 30px;
font-weight: bold; font-family: arial; } p.note { position: absolute; text-
align: center; bottom: 1%; font-size: 16px; width: 100%; line-height: 100%;
font-family: "Times New Roman"; } h2.err { position: absolute; display: block;
text-align: center; width: 100%; line-height: 100%; top: 1%; font-size: 80px;
font-weight: bold; font-family: arial; color: red; } </style>
<div class="border"> <div class="lableft" id="left"> <br><br>Flowers<br><br> </div>
<div class="labright" id="right"> <br><br>Insects<br><br> </div> <h2
class="center" id="message"><br><br><br>+</h2> <h2 class="err"
id="error"></h2> <div class="load"> <p id="loading">Loading all the content...
<br> <br> This should take less than 1 minute</p> </div> <p class="note"
id="note"></p> </div> <div style="opacity: 0; font-size:300px;
color:#fff;"><p>x</p></div>
```
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.