Skip to content

Instantly share code, notes, and snippets.

@dancourse

dancourse/text_entry.html

Last active February 5, 2019 17:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dancourse/24076fb13a88001824edad1879eff65f to your computer and use it in GitHub Desktop.
Save dancourse/24076fb13a88001824edad1879eff65f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
text_entry.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<!-- <link rel="stylesheet" href="./css/mCustomScrollbar.css"/> -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"></script>
<style>
.textarea-table-container table{
width: 100%;
}
td textarea{
resize: none;
height: 100%;
width:100%;
}
.textarea-table-container table tr th{
color: white;
border:2px solid black;
width:30%;
padding-left: 2%;
}
#stimuli-header{
background-color: #0097CE;
}
#processing-header, #processing-subheader1, #processing-subheader2, #processing-subheader3, #processing-subheader4, #processing-subheader5{
background-color: #124866;
}
#response-header{
background-color: #53605C;
}
#stimuli-txtarea{
background-color: #0097ce38;
}
#processing-txtarea, #processing1-txtarea, #processing2-txtarea, #processing3-txtarea, #processing4-txtarea, #processing5-txtarea{
background-color: #12486647;
}
#response-txtarea{
background-color: #53605c40;
}
#extract-btn{
position: absolute;
top: 100%;
right: 2%;
margin: 10px;
}
.textarea-table-container-1 table tr th {
text-align: center;
}
</style>
</head>
<body>
<div class="textarea-table-container col-12">
<table>
<tr>
<th id="stimuli-header">Stimuli</th>
<td><textarea cols="30" rows="5" id="stimuli-txtarea">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id semper risus in hendrerit. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Amet est placerat in egestas erat imperdiet sed. Justo eget magna fermentum iaculis eu non diam. Orci sagittis eu volutpat odio. Viverra maecenas accumsan lacus vel facilisis volutpat est velit. Turpis egestas integer eget aliquet nibh praesent tristique magna sit. Sed vulputate odio ut enim. Ac tincidunt vitae semper quis. Erat imperdiet sed euismod nisi porta lorem mollis. At urna condimentum mattis pellentesque id nibh tortor id. Adipiscing tristique risus nec feugiat in fermentum posuere. Massa ultricies mi quis hendrerit dolor magna. Massa tincidunt dui ut ornare lectus sit amet est placerat. Ac ut consequat semper viverra.</textarea></td>
</tr>
<tr>
<th id="processing-header">Processing</th>
<td><textarea cols="30" rows="5" id="processing-txtarea">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id semper risus in hendrerit. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Amet est placerat in egestas erat imperdiet sed. Justo eget magna fermentum iaculis eu non diam. Orci sagittis eu volutpat odio. Viverra maecenas accumsan lacus vel facilisis volutpat est velit. Turpis egestas integer eget aliquet nibh praesent tristique magna sit. Sed vulputate odio ut enim. Ac tincidunt vitae semper quis. Erat imperdiet sed euismod nisi porta lorem mollis. At urna condimentum mattis pellentesque id nibh tortor id. Adipiscing tristique risus nec feugiat in fermentum posuere. Massa ultricies mi quis hendrerit dolor magna. Massa tincidunt dui ut ornare lectus sit amet est placerat. Ac ut consequat semper viverra.</textarea></td>
</tr>
<tr>
<th id="processing-subheader1">1.Needs, desires and motives</th>
<td><textarea cols="30" rows="5" id="processing1-txtarea">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id semper risus in hendrerit. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Amet est placerat in egestas erat imperdiet sed. Justo eget magna fermentum iaculis eu non diam. Orci sagittis eu volutpat odio. Viverra maecenas accumsan lacus vel facilisis volutpat est velit. Turpis egestas integer eget aliquet nibh praesent tristique magna sit. Sed vulputate odio ut enim. Ac tincidunt vitae semper quis. Erat imperdiet sed euismod nisi porta lorem mollis. At urna condimentum mattis pellentesque id nibh tortor id. Adipiscing tristique risus nec feugiat in fermentum posuere. Massa ultricies mi quis hendrerit dolor magna. Massa tincidunt dui ut ornare lectus sit amet est placerat. Ac ut consequat semper viverra.</textarea></td>
</tr>
<tr>
<th id="processing-subheader2">2.Personality</th>
<td><textarea cols="30" rows="5" id="processing2-txtarea">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id semper risus in hendrerit. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Amet est placerat in egestas erat imperdiet sed. Justo eget magna fermentum iaculis eu non diam. Orci sagittis eu volutpat odio. Viverra maecenas accumsan lacus vel facilisis volutpat est velit. Turpis egestas integer eget aliquet nibh praesent tristique magna sit. Sed vulputate odio ut enim. Ac tincidunt vitae semper quis. Erat imperdiet sed euismod nisi porta lorem mollis. At urna condimentum mattis pellentesque id nibh tortor id. Adipiscing tristique risus nec feugiat in fermentum posuere. Massa ultricies mi quis hendrerit dolor magna. Massa tincidunt dui ut ornare lectus sit amet est placerat. Ac ut consequat semper viverra.</textarea></td>
</tr>
<tr>
<th id="processing-subheader3">3.Personal and economic circumstances</th>
<td><textarea cols="30" rows="5" id="processing3-txtarea">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id semper risus in hendrerit. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Amet est placerat in egestas erat imperdiet sed. Justo eget magna fermentum iaculis eu non diam. Orci sagittis eu volutpat odio. Viverra maecenas accumsan lacus vel facilisis volutpat est velit. Turpis egestas integer eget aliquet nibh praesent tristique magna sit. Sed vulputate odio ut enim. Ac tincidunt vitae semper quis. Erat imperdiet sed euismod nisi porta lorem mollis. At urna condimentum mattis pellentesque id nibh tortor id. Adipiscing tristique risus nec feugiat in fermentum posuere. Massa ultricies mi quis hendrerit dolor magna. Massa tincidunt dui ut ornare lectus sit amet est placerat. Ac ut consequat semper viverra.</textarea></td>
</tr>
<tr>
<th id="processing-subheader4">4.Social and cultural influences</th>
<td><textarea cols="30" rows="5" id="processing4-txtarea">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id semper risus in hendrerit. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Amet est placerat in egestas erat imperdiet sed. Justo eget magna fermentum iaculis eu non diam. Orci sagittis eu volutpat odio. Viverra maecenas accumsan lacus vel facilisis volutpat est velit. Turpis egestas integer eget aliquet nibh praesent tristique magna sit. Sed vulputate odio ut enim. Ac tincidunt vitae semper quis. Erat imperdiet sed euismod nisi porta lorem mollis. At urna condimentum mattis pellentesque id nibh tortor id. Adipiscing tristique risus nec feugiat in fermentum posuere. Massa ultricies mi quis hendrerit dolor magna. Massa tincidunt dui ut ornare lectus sit amet est placerat. Ac ut consequat semper viverra.</textarea></td>
</tr>
<tr>
<th id="processing-subheader5">5.Information processing: perception, learning and attitudes</th>
<td><textarea cols="30" rows="5" id="processing5-txtarea"></textarea></td>
</tr>
<tr>
<th id="response-header">Response</th>
<td><textarea cols="30" rows="5" id="response-txtarea">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id semper risus in hendrerit. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Amet est placerat in egestas erat imperdiet sed. Justo eget magna fermentum iaculis eu non diam. Orci sagittis eu volutpat odio. Viverra maecenas accumsan lacus vel facilisis volutpat est velit. Turpis egestas integer eget aliquet nibh praesent tristique magna sit. Sed vulputate odio ut enim. Ac tincidunt vitae semper quis. Erat imperdiet sed euismod nisi porta lorem mollis. At urna condimentum mattis pellentesque id nibh tortor id. Adipiscing tristique risus nec feugiat in fermentum posuere. Massa ultricies mi quis hendrerit dolor magna. Massa tincidunt dui ut ornare lectus sit amet est placerat. Ac ut consequat semper viverra.</textarea></td>
</tr>
</table>
<button id="extract-btn" class="btn btn-primary">Extract to PDF</button>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="js/jspdf.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.debug.js"></script> -->
<script type="text/javascript">
$('#extract-btn').click(function(event) {
var textCombined = [];
var titleArray = ["Stimuli", "Processing", "1.Needs, desires and motives", "2.Personality", "3.Personal and economic", "4.Social and cultural influences", "5.Information processing:perception, learning and attitudes", "Response"];
var allTexts = document.querySelectorAll('textarea');
var doc = new jsPDF({ orientation: 'l'});
// from github - https://github.com/MrRio/jsPDF/pull/1450
// doc.addHTML($("table"), 10, 10, {pagesplit: true, margin: {top: 10, right: 10, bottom: 10, left: 10, useFor: 'page'}}, function () {doc.save("test.pdf")})
$("body").append('<div id="toPrint" style="background: white; color: black; font: arial; width: 650px;"><ul></ul></div>');
for (var i = 0; i < allTexts.length; i++){
$("#toPrint > ul").append('<li style="padding-bottom: 15px;">'+titleArray[i]+"<br/>"+allTexts[i].value+"</li>");
textCombined.push(titleArray[i]);
textCombined.push('\n');
textCombined.push(allTexts[i].value);
textCombined.push('\n\n');
}
doc.addHTML($("#toPrint"), 10, 10, {pagesplit: true, margin: {top: 0, right: 10, bottom: 0, left: 10, useFor: 'page'}}, function () {doc.save("input.pdf"); $("#toPrint").remove();})
});
$(function(){
const urlParams = new URLSearchParams(document.referrer);
const stimuli = urlParams.get('stimuli');
const processing = urlParams.get('processing');
const response = urlParams.get('response');
$('#stimuli-txtarea').html(stimuli);
$('#processing-txtarea').html(processing);
$('#response-txtarea').html(response);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment