Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
example.html
<!--tag buttons style-->
<style>
.btn-tag {
margin-bottom: 5px;
text-transform: capitalize;
}
.btn-tag.connections {
background-color: rgba(255, 255, 157, 0.5);
}
.btn-tag.connections.active {
background-color: rgba(255, 255, 157, 1); font-weight: bold;
}
</style>
<!--End tag buttons style-->
<div class="row">
<!-- Success and Error Messages for the user -->
<div class="col-md-12">
<!-- Success alert box -->
<div id="success" class="alert alert-success" style="display:none;">
<a class="close">×</a><strong>Well done!</strong> Your answer has been saved
</div>
<!-- Task completed alert box -->
<div id="taskcompleted" class="alert alert-info" style="display:none;">
<strong>The task has been completed!</strong> Thanks a lot!
</div>
<!-- Task loading alert box -->
<div id="loadingTask" class="alert alert-info">
<strong>Loading task...</strong>
</div>
<!-- Task completed alert box -->
<div id="finish" class="alert alert-success" style="display:none;">
<strong>Congratulations!</strong> You have participated in all available tasks!
<br/>
<div class="alert-actions">
<a class="btn small" href="/">Go back</a>
<a class="btn small" href="/project/category/featured/">or, Check other projects</a>
</div>
</div>
<!-- Error alert box -->
<div id="error" class="alert alert-danger" style="display:none;">
<a class="close">×</a>
<strong>Error!</strong> Something went wrong, please contact the site administrators
</div>
<!-- Old Browser alert box -->
<div id="oldBrowser" class="alert alert-info" style="display:none;">
<a class="close">×</a>
<p><strong>Sorry!</strong> Your web browser does not support the application.<p>
<div class="alert-actions">
<a class="btn small" href="/app">Please, try with another project</a>
</div>
</div>
</div><!-- End of span8 col-md-offset-2-->
</div><!-- End of Row-->
<div class="row">
<div class="skeleton col-md-12">
<h1 class="lead" id="question"></h1>
<button class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal">
<i class="glyphicon glyphicon-eye-open"></i> Tutorial
</button>
<p style="margin-top:10px;">
<h2 class="lead display-5 text-success">Mark the place associated with your memory in the New Waverley area, North Canongate, Edinburgh </h2>
<div>
<div id="map" class="mb-3"></div>
<p class="text-info"><i class="fa fa-map-marker"></i> Memory place position
<span id="lat"></span> <span id="lon"></span>
</p>
</div>
<!--Connections-->
<div class="skeleton row">
<!-- Start Skeleton Row-->
<div class="col-md-6 ">
<!-- Start of Question and Submission DIV (column) -->
<p style="margin-top:10px;">
Select as many of the following tags as are applicable to express your connection with the North Canongate area:
</p>
<div id="connections">
<button class="btn btn-sm btn-default btn-tag connections" value="family">Family</button>
<button class="btn btn-sm btn-default btn-tag connections" value="friends">Friends</button>
<button class="btn btn-sm btn-default btn-tag connections" value="residence">Residence</button>
<button class="btn btn-sm btn-default btn-tag connections" value="work">Work</button>
<button class="btn btn-sm btn-default btn-tag connections" value="leisure">Leisure</button>
<button class="btn btn-sm btn-default btn-tag connections" value="religion">Religion</button>
<button class="btn btn-sm btn-default btn-tag connections" value="history">Historical interest</button>
</div>
<form id="magicData" role="form">
<div class="row">
<div class="skeleton col-md-12">
<div class="form-group">
<p style="margin-top:10px;">
If none of the above describes your connection, please use the box below.
</p>
<p>
<textarea class="form-control" rows="1" id="custom" name="custom"></textarea>
</p>
</div>
</div>
</div>
<!--End Connections-->
<form id="magicData" role="form">
<div class="row">
<div class="skeleton col-md-12">
<div class="form-group">
<h3 class="lead">Memory Box</h3>
<p>
<textarea class="form-control" rows="5" id="memory" name="memory"
placeholder="Type here why this place is significant to you, for example by sharing a story"></textarea>
</p>
</div>
</div>
</div>
<div>
<button class="btn btn-success btn-answer" value="Yes">
<i class="fa fa-check"></i> Save the place and your memories
</button>
</div>
</form>
</div>
<!-- The data entry section using html table -->
<div class="col-md-12 my-3">
<!-- Feedback items for the user -->
<p>
You are working now on task: <span id="taskid" class="badge badge-warning badge-lg">#</span>
</p>
<p>
You have completed: <span id="done" class="badge badge-info"></span> tasks from
<!-- Progress bar for the user -->
<span id="total" class="badge badge-dark"></span>
</p>
<div class="progress progress-striped">
<div id="progress" rel="tooltip" title="#" class="progress-bar" role="progressbar"
style="width: 0%;"></div>
</div>
<!-- End of feedback row -->
</div>
<!-- End of the section -->
</div>
<style media="screen">
#map { height: 400px; width:100%;}
</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src="/static/js/vendor/jquery.serializeJSON.min.js" type="text/javascript"></script>
<div id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal header -->
<div class="modal-header">
<h3>How to share your story</h3>
</div>
<!-- Step 1 of the tutorial -->
<div id="0" class="modal-body" style="display:none">
<p style="text-align: justify;">
This application collects current experiences and past memories related to the current New Waverley area in North Canongate, Edinburgh.
</p>
<p style="text-align: justify;">
You will be presented with a map of the area. If you recognize a location or building that is significant to you, just click on it. A marker will be added to the map.
</p>
<p style="text-align: justify;">
If you've added the marker in the wrong place by mistake, don't worry, you can move the marker by clicking on it.
</p>
<img src="https://blog.micropasts.org/wp-content/uploads/2021/08/tutorial1-e1628713558237.jpg" />
</p>
</div>
<!-- Step 2 of the tutorial -->
<div id="1" class="modal-body" style="display:none">
<p style="text-align: justify;">
Please describe your connection with the North Canongate area by selecting one of the tags suggested, or use the box below if none of them fit.
<p style="text-align: justify;">
Then, use the Memory Box to share your story. First, type the name of the place/building if you know it, and a broad date or dates (for example "1980s" or "Summer 2015") associated with your experience. Then, tell us why that place is significant to you.
<p>
<img src="https://blog.micropasts.org/wp-content/uploads/2021/08/tutorial2-e1628714096513.jpg" />
</p>
</div>
<!-- Step 3 of the tutorial -->
<div id="2" class="modal-body" style="display:none">
<p style="text-align: justify;">
Finally, press the green button "Save the place and your memories" to submit your story!
<p>
<img src="https://blog.micropasts.org/wp-content/uploads/2021/07/submit-e1626898527956.png" />
</p>
<p style="text-align: justify;">
Please contact us at deepcitiesapp@gmail.com if you have any comments or queries about the app or our project.
</p>
</div>
<!-- End of stepped modal body -->
<!-- Modal footer -->
<div class="modal-footer">
<a id="prevBtn" href="#" onclick="showStep('prev')" class="btn btn-default">Previous</a>
<a id="nextBtn" href="#" onclick="showStep('next')" class="btn btn-success">Next</a>
<a id="startContrib" data-dismiss="modal" href="../urban/newtask" class="btn btn-primary"
style="display:none"/><i class="glyphicon glyphicon-thumbs-up"></i> Let's start!</a>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var step = -1;
function showStep(action) {
$("#" + step).hide();
if (action == 'next') {
step = step + 1;
}
if (action == 'prev') {
step = step - 1;
}
if (step == 0) {
$("#prevBtn").hide();
$("#nextBtn").show();
}
else {
$("#prevBtn").show();
}
if (step == 2 ) {
$("#nextBtn").hide();
$("#prevBtn").show();
$("#startContrib").show();
}
$("#" + step).show();
}
showStep('next');
$("#myModal").modal('show');
</script>
<script>
var Latitude;
var Longitude;
var Marker;
var Connections;
var map = L.map('map',{dragging:false, scrollWheelZoom:false, zoomControl: false}).setView([55.951957, -3.181014], 17);
L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var onDrag = function (e) {
var latlng = Marker.getLatLng();
document.getElementById('lat').innerHTML = ' Latitude: ' + latlng.lat + ',';
document.getElementById('lon').innerHTML = ' Longitude: ' + latlng.lng;
Latitude = latlng.lat ;
Longitude = latlng.lng;
console.log(latlng);
console.log(Latitude);
console.log(Longitude);
};
var onClick = function(e) {
map.off('click', onClick);
Marker = L.marker(e.latlng,{draggable: true}).addTo(map);
var lat = e.latlng.lat;
var lon = e.latlng.lng;
Latitude = lat;
Longitude = lon;
$('#lat').html('').append(' Latitude: ' + lat + ',');
$('#lon').html('').append(' Longitude: ' + lon);
console.log("Lat, Lon : " + lat + ", " + lon);
console.log(Latitude);
console.log(Longitude);
Marker.on('drag', onDrag);
};
map.on('click', onClick);
// This part of the script loads the user's progress through the project
function loadUserProgress() {
pybossa.userProgress('Urblan').done(function(data) {
console.log(data);
console.log("Total answers done for user: " + data.done);
var pct = Math.round((data.done * 100) / data.total);
$("#progress").css("width", pct.toString() + "%");
$("#progress").attr("title", pct.toString() + "% completed!");
$("#progress").tooltip({ 'placement' : 'left' });
$("#total").text(data.total);
$("#done").text(data.done);
$('a[rel]').tooltip({'placement' : 'left'});
});
}
pybossa.taskLoaded(function(task, deferred) {
if (! $.isEmptyObject(task)) {
$('#loadingTask').hide();
loadUserProgress();
deferred.resolve(task);
} else {
deferred.resolve(task);
}
});
function toggleBtn(btn, task) {
var userCon = $(btn).attr("value");
Connections = userCon;
$('#userCon').html('').append('Connections:' + userCon);
console.log("userCon:" + userCon);
console.log(Connections);
if ($(btn).hasClass('active')) {
$(btn).removeClass('active');
}
else {
$(btn).addClass('active');
//console.log(task.answer);
}
};
// This part presents the task and then saves the answers
pybossa.presentTask(function(task, deferred) {
if (!$.isEmptyObject(task)) {
console.log(task)
$('#question').html(task.info.question);
$('#taskid').html(task.id);
$('#city').html('').append(task.info.city);
Connections = '[]';
var handleBtn = function(evt) {
toggleBtn(this, task);
};
$('.btn-tag').off('click').on('click', handleBtn);
$('.btn-answer').off('click').on('click', function(evt) {
evt.preventDefault();
var answer = $(evt.target).attr("value");
console.log(answer)
if ( typeof answer != 'undefined') {
task.answer = $("#magicData").serializeJSON();
task.answer.lat = Latitude;
task.answer.lon = Longitude;
task.answer.coordinates = Latitude + ',' + Longitude;
task.answer.connections = Connections;
console.log(task.answer);
pybossa.saveTask(task.id, task.answer).done(function() {
$("html, body").animate( {scrollTop : 0 }, "slow");
$("#success").fadeIn(500).fadeOut(500);
$("#loading").fadeIn(500).fadeOut(500);
$('#magicData')[0].reset();
deferred.resolve();
$('#lat').empty();
$('#lon').empty();
Connections = '[]';
map.removeLayer(Marker);
map.invalidateSize();
map.on('click', onClick);
$('.btn-tag.connections').removeClass('active');
});
} else {
$("#error").show();
}
});
$("#loading").hide();
} else {
$(".skeleton").hide();
$("#loading").hide();
$("#finish").fadeIn(500);
}
});
pybossa.run('Urblan');
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment