Hi all! I wanted to share my issue with HTML code in Qualtrics and ask if anyone has any tips.
I wrote a custom HTML / Javascript code that creates tables and graphs on a question. I paste HTML and Javascript code scripts from my laptop to HTML and Javascript editors, respectively. Javascript code works fine and stays intact in the Javascript script editor in Qualtrics. However, when I paste HTML code, 9 out of 10 times Qualtrics reduces the code and makes it dysfunctional. Please see below my HTML code and its edited version by Qualtrics.
Context: (1) I put “<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>” in the header of the survey, (2) I do use Text / Graphic format a question, and do use HTML and Javascript editors separately for HTML and Javascript code (I do not paste and Javascript code into the HTML editor).
The tips I found somewhat useful so far: after pasting the code from my laptop, I edit the code a little bit (e.g. add a couple of letters to the title in HTML). That helps, but not always (8 out of 10 times the code still gets reduced). Other things (reloading the browser or webpage) don’t seem to be helping.
I see that the HTML code gets reduced specifically when I save HTML code, and after saving the question is still in editing mode (i.e. that there is editing cursor in the question text). Editing the HTML code a bit after pasting it helps (i.e. sometimes I don’t see the editing cursor), but doesn’t work every time.
If anyone else has any tips of how to solve this issue or work around it, I will be very grateful!
Original HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scatter Plots and Data Table</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<style>
.container {
display: flex;
}
.table-container {
width: 30%;
height: 30%;
margin-right: 1%;
overflow: auto;
}
.tables-container {
width: 30%;
height: 30%;
margin-right: 1%;
overflow: auto;
}
table {
border-collapse: collapse;
width: 100%;
font-size: 12px; /* Adjust the font size here */
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: right;
white-space: nowrap; /* Ensure content doesn't wrap */
}
th {
background-color: #f2f2f2;
}
.scatter-container {
width: 35%;
height: 35%;
margin-right: 1%;
}
</style>
</head>
<body>
<div class="container">
<div class="table-container">
<table id="data-table">
<thead>
<tr>
<th>X1</th>
<th>X2</th>
<th>Y</th>
</tr>
</thead>
<tbody>
<!-- Data rows will be inserted here by JavaScript -->
</tbody>
</table>
</div>
<div id="scatter1" class="scatter-container"></div>
<div id="scatter2" class="scatter-container"></div>
<div class="tables-container">
<div class="table-container">
<table id="prediction-table">
<thead>
<tr>
<th>X1</th>
<th>X2</th>
<th>Predicted Y</th>
</tr>
</thead>
<tbody>
<!-- Prediction rows will be inserted here by JavaScript -->
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>Reduced version by Qualtrics:
<title>Scatter Plots and Data Table suka blya</title>
<div class="container">
<div class="table-container">
<table id="data-table">
<thead>
<tr>
<th>X1</th>
<th>X2</th>
<th>Y</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="scatter-container" id="scatter1"></div>
<div class="scatter-container" id="scatter2"></div>
<div class="tables-container">
<div class="table-container">
<table id="prediction-table">
<thead>
<tr>
<th>X1</th>
<th>X2</th>
<th>Predicted Y</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>