Skip to content

Commit

Permalink
New click-based synchronization system #58
Browse files Browse the repository at this point in the history 
The input-based sync system where users had to input the current time after a five seconds countdown was source of errors. Many users were inputing 12 hours-format time instead of 24 and we were likely having a serious issue with timezones...
In this prototype, users have to click a button at the next quarter minute. For ex, if it's 12:20:20, then we'll ask to hit the button at 12:20:30.

I included some jokes (Almost there youngling, All good, take me home scotty, One does not simply ...) that we could randomize (like the Jack bot). The rule is, however, to keep them short (20 characters space included) so they fit on the popup.

@AlphonseJr, @VS2000, thoughts ?
  • Loading branch information
@MathieuNls
MathieuNls committed Jan 29, 2016
1 parent 74aec1e commit b7625d5
Show file tree
Hide file tree
Showing 6 changed files with 280 additions and 227 deletions.
36 changes: 0 additions & 36 deletions application/views/measure/audio.php
View file

This file was deleted.

2 changes: 1 addition & 1 deletion application/views/measure/dashboard.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@
<div class="col-md-12">
<center>
<a class="btn btn-success btn-lg col-md-2 col-md-offset-5" href="/measures/new-watch/">Add a watch</a><br><br>
<?php if($watches != null) { ?>
<?php if($allMeasure != null) { ?>

<a class="btn btn-primary btn-lg col-md-2 col-md-offset-5" href="/measures/new-measure/">Start a new measure</a>

Expand Down
54 changes: 23 additions & 31 deletions application/views/measure/get-accuracy.php
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,33 @@
<div class="container container-fluid content first">
<div class="row">
<div class="col-md-12">
<center><h1 id="mainTitle">Check the accuracy</h1></center>
<center><h1 id="mainTitle">Check the accuracy <span id="selectedWatch"> of your <?php echo $selectedWatch->brand.' - '.$selectedWatch->name;?></span></h1></center>
</div>
</div>
<span id="accuracyHolder"></span>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form class="form-horizontal" method="post" name="newAccuracy">


<div id="mainExplanation" class="form-group">
<center>
At the end of the countdown, please enter below the exact time as it is on your watch. <br>Let's check the accuracy of your watch!
</center>
</div>
<div class="form-group watch-select">
<label for="brand" class="col-sm-4 control-label">Selected watch </label>
<div class="col-sm-6">
<select class="form-control" name="watchId">
<?php echo '<option value="'.$selectedWatch->watchId.'" selected>'.$selectedWatch->brand.' - '.$selectedWatch->name.'</option>'; ?>
</select>
</div>
</div>
<select style="display:none" class="form-control" name="watchId">
<?php echo '<option value="'.$selectedWatch->watchId.'" selected>'.$selectedWatch->brand.' - '.$selectedWatch->name.'</option>'; ?>
</select>

<div class="form-group">
<div class="col-sm-12">
<center class="sync-time">5</center>
<center>
<br />
<br />
<br />
<a href="javascript:clicked();"
style="display:none"
id="sync-button"
class="btn btn-primary btn-lg">
</a>
</center>
</div>
</div>

<div class="form-group userTime">
<label for="watchTime" class="col-sm-4 control-label">Enter your time </label>
<div class="col-sm-8">
<input type="text" name="userTime" class="form-control" placeholder="ex: 12:34:56">
<br>Please use the 24-hour clock format
<span class="signup-error time-error">Your time should be hours:minutes:seconds (like 11:22:33).</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<span class="signup-error measure-error"><center>An error occured while synchronizing with Toolwatch’s accuracy system.<br>Please try again later.</center></span>
Expand Down Expand Up @@ -88,12 +79,12 @@
</div>

<br/>

<br />
<center><p><br /><br />We <i style="color:#4d77a7" class="fa fa-heart"></i> <a href="https://instagram.com/toolwatchapp/">Instagram</a>, tag us with your wristshots and share your results using #ToolwatchApp !</p></center>

<!-- www.intagme.com -->
<iframe src="http://www.intagme.com/in/?u=dG9vbHdhdGNoYXBwfGlufDEwMHw0fDJ8fHllc3w1fHVuZGVmaW5lZHx5ZXM=" allowTransparency="true" frameborder="0" scrolling="no" style="margin-left:5px; border:none; overflow:hidden; width:auto; height: 230px" ></iframe>

<br />
<!-- INSTANSIVE WIDGET -->
<script src="//instansive.com/widget/js/instansive.js"></script>
<iframe src="//instansive.com/widgets/3eea3b0bb6345272b1e1944fd14859aa.html" id="instansive_3eea3b0bb6" name="instansive_3eea3b0bb6" scrolling="no" allowtransparency="true" class="instansive-widget" style="width: 100%; border: 0; overflow: hidden;"></iframe>
</div>

</div>
Expand All @@ -109,13 +100,14 @@
<input type="hidden" name="measureId" value="<?php echo $measureId;?>">
<button class="btn btn-primary btn-lg" name="startSync">Check now!</button>
<a class="btn btn-success btn-lg no-display backToMeasure" href="/measures/">Back to measures</a>
<button class="btn btn-primary btn-lg no-display" name="restartCountdown">Restart countdown</button>
<button type="submit" class="btn btn-success btn-lg btn-spinner" name="syncDone" disabled>Check the accuracy! <i class="fa fa-spinner fa-pulse"></i></button>
<button class="btn btn-primary btn-lg no-display" name="restartCountdown">I missed it</button>
</center>
</div>
</div>
</form>
</div>
</div>
<img style="display:none" id="watch" src="<?php echo img_url('flatwatch-blank.png');?>">

<?php $this->load->view("time");?>
</div>
44 changes: 13 additions & 31 deletions application/views/measure/new-measure.php
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,12 @@
<div class="container container-fluid content first">
<div class="row">
<div class="col-md-12">
<center><h1>New measure</h1></center>
<center><h1>New measure <span id="selectedWatch"></span></h1></center>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form class="form-horizontal" method="post" name="newMeasure">
<div class="form-group">
<center>
To begin measuring the accuracy of your watch, we must first synchronize your watch with Toolwatch’s accuracy system.
Start clicking on « Start now! » to start the countdown then look at your watch.<br><br>
At the end of the countdown, please enter below the exact time as it is on your watch. Let’s start measuring!
</center>
</div>
<div class="form-group watch-select">
<label for="brand" class="col-sm-4 control-label">Select your watch </label>
<div class="col-sm-8">
Expand All @@ -34,26 +27,16 @@
</div>
<div class="form-group">
<div class="col-sm-12">
<center class="sync-time">5</center>
</div>
</div>
<div class="form-group sync-success" style="display:none;">
<div class="col-sm-12">
<div class="alert alert-success">
<center>
Congratulations, your watch is now synchronized.
For a better accuracy of the measurement, you must wait at least 12 hours before coming back.
Do not worry, we will send you an email when you should come back and check your results.
</center>
</div>
</div>
</div>
<div class="form-group userTime">
<label for="watchTime" class="col-sm-4 control-label">Enter your time </label>
<div class="col-sm-8">
<input type="text" name="userTime" class="form-control" placeholder="ex: 12:34:56">
<br>Please use the 24-hour clock format
<span class="signup-error time-error">Your time should be hours:minutes:seconds (like 11:22:33).</span>
<center>
<br />
<br />
<br />
<a href="javascript:clicked();"
style="display:none"
id="sync-button"
class="btn btn-primary btn-lg">
</a>
</center>
</div>
</div>
<div class="form-group">
Expand All @@ -65,13 +48,12 @@
<div class="col-sm-12">
<center>
<button class="btn btn-primary btn-lg" name="startSync">Start now!</button>
<a class="btn btn-success btn-lg no-display backToMeasure" href="/measures/">Back to measures</a>
<button class="btn btn-primary btn-lg no-display" name="restartCountdown">Restart countdown</button>
<button type="submit" class="btn btn-success btn-lg btn-spinner" name="syncDone" disabled>I'm synchronized! <i class="fa fa-spinner fa-pulse"></i></button>
<button class="btn btn-primary btn-lg no-display" name="restartCountdown">I missed it</button>
</center>
</div>
</div>
</form>
</div>
</div>
<?php $this->load->view("time");?>
</div>
128 changes: 0 additions & 128 deletions assets/js/application.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -234,29 +234,6 @@ $(document).ready(function()
}
});

$('body').on('click', 'button[name="startSync"]', function(e)
{
e.preventDefault();
var watchId = $('select[name="watchId"]').val();
$('.watch-error').hide();

if(watchId != null)
{
$('button[name="startSync"]').hide();
$('button[name="syncDone"]').show();
$('.sync-time').show();
$('button[name="restartCountdown"]').show();
$('.watch-select').hide();

bips.play();

}
else
{
$('.watch-error').show();
}

});

$('body').on('submit', 'form[name="addWatch"]', function(e)
{
Expand Down Expand Up @@ -286,111 +263,6 @@ $(document).ready(function()

});


$('body').on('submit', 'form[name="newAccuracy"]', function(e)
{
e.preventDefault();
var watchId = $('select[name="watchId"]').val();
var userTime = $('input[name="userTime"]').val();
var myDate = new Date();
// Timezone difference from Europe/Paris
var userTimezone= (myDate.getTimezoneOffset()/60)+1;
var measureId = $('input[name="measureId"]').val();

if(hoursRegExp.test(userTime))
{
$('.btn-spinner i').css('display', 'inline-block');

$.post('/measures/accuracyMeasure', {watchId: watchId, userTime: userTime, userTimezone: userTimezone, measureId: measureId}, function(data)
{
var result = $.parseJSON(data);
if(result.success == true)
{
$('.userTime').hide();
$('button[name="syncDone"]').hide();
$('.sync-time').hide();
$('button[name="restartCountdown"]').hide();
$('.sync-success').show();
$('.backToMeasure').show();
$('#mainTitle').hide();
$('#mainExplanation').hide();

if(result.accuracy != null)
{
if(result.accuracy > 0){
result.accuracy = '+'+result.accuracy;
}

$('.watch-accuracy').html(result.accuracy);
$('.watch-percentile').html(result.percentile);

$('.share-button').each(function(index){
$(this).attr("href", $(this).attr("href").replace("{WatchPercentile}", result.percentile));
});

}
}
else
{
$('.measure-error').show();
$('.btn-spinner i').css('display', 'none');
}

});
}
else
{
$('.time-error').show();
}

});



$('body').on('submit', 'form[name="newMeasure"]', function(e)
{
e.preventDefault();
$('.signup-error').hide();

var watchId = $('select[name="watchId"]').val();
var userTime = $('input[name="userTime"]').val();
var getAccuracy = $('input[name="getAccuracy"]').val();

var myDate = new Date();
// Timezone difference from Europe/Paris
var userTimezone= (myDate.getTimezoneOffset()/60)+1;

if(hoursRegExp.test(userTime))
{
$('.btn-spinner i').css('display', 'inline-block');

$.post('/measures/baseMeasure', {watchId: watchId, userTime: userTime, userTimezone: userTimezone, getAccuracy: getAccuracy}, function(data)
{
var result = $.parseJSON(data);
if(result.success == true)
{
$('.userTime').hide();
$('button[name="syncDone"]').hide();
$('.sync-time').hide();
$('button[name="restartCountdown"]').hide();
$('.sync-success').show();
$('.backToMeasure').show();

}
else
{
$('.measure-error').show();
$('.btn-spinner i').css('display', 'none');
}

});
}
else
{
$('.time-error').show();
}
});

$('body').on('submit', 'form[name="contact"]', function(e)
{
e.preventDefault();
Expand Down
Loading

0 comments on commit b7625d5

Please sign in to comment.