Pachmarchi | Best Hill Station in India | Queen of Waterfalls

Implementing Mockworth Clock Game with HTML, CSS and Javascript

The Mockworth Clock Game is concentration game based on Mockworth Clock. The Game has a black background circular Dial with 24 "+" marks representing 24 slots like clock and red dot jumping over these slots . The red dots moves in short jumps like the second hand of an analog clock, approximately every second. At infrequent and irregular intervals, the red dots makes a double jump, e.g. 3 times in 1 complete loop. Basically the game is to detect when the double jumps occur by pressing space-bar. Typically, Mackworth's participants would play these game for pre-defined number of loops.

The Clock is an experimental device used in the field of experimental psychology to study the effects of long term vigilance on the detection of signals. It was originally created by Norman Mackworth as an experimental simulation of long term monitoring by radar operators in the British Air Force during World War II.

Technology

In Mockworth clock game, black circular dial is designed with the help of HTML and CSS, 24 “+” signs are designed using images and it is placed in circle with css property transform: rotate(x deg) translate(x px) rotate(-x deg) where x and y is user defined.

For example:

red dot pointing at 12 o'clock

.deg270 {

transform: rotate(270deg) translate(17em) rotate(-270deg);

}

Red dot movement is achieved with the help of javascript animate() function and opacity css property. And to make red dot movement in loop, we use javascript recursive setTimeout(function()) function.

For example:

To blink red dot at some interval of time.

setTimeout(function() {

$(#id_name]).animate(

{opacity: 1},{

duration: 400,complete: function ()

{

$(this).css({opacity: 0}); <.p>

}

}

);

Skipping of red dot is done by Math.round(Math.random()) function.

When red dot skips, participant need to press space-bar and hit counts. These is achieved by using keypress() function and result is displayed in score board.

For example:

For counting space-bar pressed.

$(document).keypress(function(event){

var keycode = (event.keyCode ? event.keyCode : event.which);

if(keycode == '32' ){

SCORE = SCORE + 1 ;

}

document.getElementById(' id_name ').innerHTML = SCORE;

});

At the end of game, final result is displayed, which is using parseInt() and text() function.

Game Procedures

• A circle, with 24 equally spaced "slots" (as represented by the empty space between two "+" marks), is presented on the computer screen.
• The Subject can put n number of loops as per interest in input box and starts the game.
• A red dot starts from the 12'o clock position and flashes in turn in each "slot".
• The dot stays visible for 1 sec and so there is an interval of 1 sec between each flash.
• At some postion red dot skip anomaly .
• Total number skip is random in complete one loop.
• The subject identifies this event by hitting the space bar (or other user-definable key).
• The entire game lasts up to a pre-defined number of loop.
• After the game over result is diplayed on Score Board in percentage.

This game is developed by Cryptex Technologies ROR developers in India.

New Age New Methodology - Agile Methodology

Software development is something all types of companies around the world are having to adopt. How they go about purchasing a custom software is a key to their success. There are two choices a company has when it comes to custom software.

1) Waterfall methodology.

2) Agile methodology.

Waterfall methodology is older than Agile methodology is basically a linear model of software design. Waterfall employs sequential codes and design process. In contrast agile proposes an iterative approach to software design. Agile methodology was born after the waterfall model in response to the shortcomings of the waterfall model.

The present situation of the agile development software market is inconsistent and unstable. Nowadays everyone seems to sell software development services, price ranges significantly, the companies are young and quotes are rarely transparent, etc. In order to sustain in competitive and inconsistent environment one should adopt an agile methodology. There are several ways agile methodology can help software development companies respond to the dynamic conditions of the market.

Transparency and pricing :

Agile contracts offer transparency: The Standard agile contract defines resource types, and resource dedication.

For example:

1) Project manager 50% dedication

2) .net developer 25% dedication

3) Senior .net developer 25% dedication

Clients actively participate in requirement definition and operating cost of the development team. Everything is discussed out in the open team. Time and cost related with every software functionality discussed openly with the development team.

How to sort data in Rails app using ‘DataTable’ gem

Sorting, searching and paginating data has always been one of the requirements of a Rails application.DataTable gem provides a jQuery Javascript library - Highly flexible tool, based upon the foundations of progressive enhancement which will add advanced interaction controls to any HTML table.

Integrate this gem in the Rails application by putting this gem into gemfile.

DataTables makes it easy to convert a plain HTML table into one with  pagination, sorting, and searching - all done with JavaScript or jQuery. Instead of writing searching functionality, sorting functionality and pagination functionality separately, these functionalities are conveniently performed by using datatable gem.

Sorting data is inbuilt so instead of sortable_table gem use datatable gem and all columns are sortable in ascending and descending order.

In some cases, we have to hide searching, pagination functionality in table. For hiding pagination functionality we have to write "bPaginate": false   and for hiding searching functionality we have to write "searching": false.

When you reload the page,you can see your listing page in better UI with sorting searching and pagination functionality.

The following steps with the description implements sorting,searching and pagination for particular table using datatable gem in our ruby on rails applicationeasily.

STEP 1. gem install jquery-datatables-rails

STEP 2. Open app/assets/javascript/application.js and write :

//= require dataTables/jquery.dataTables

STEP 3. Open app/assets/stylesheets/application.css and write :

          *= require dataTables/jquery.dataTables

STEP 4. Provide id for a particular table.

<table class="table table-bordered table-striped" id="myTable">

STEP 5. Call this table id by jQuery DataTable() function.

Sample Code:

<table class="table table-bordered table-striped" id="myTable">

<script type="text/javascript">

$(document).ready(function(){

$('#myTable').DataTable();

});

</script>

In some cases, we have to hide searching, pagination functionality in table.

For hiding pagination and searching functionality we have to write:

<script type="text/javascript">

          $('#myTable').DataTable({

"bPaginate": false,

"searching": false

} );

</script>

React Technology Build Beautiful Apps

React is not a framework; it is mainly a concept, libraries and principles that turn it into a fast, compact and beautiful way to program your app on the client and server side as well, which is developed and used by Facebook.

Why is it a game changer?

Like every programming concept, React has it’s own solutions, tools and libraries turning it into an ecosystem. In this ecosystem, you have to pick your own tools and build your own framework.You already know most of these tools, we will just connect them to each other. For example for dependencies we won't use any magic, rather Node's require and npm. It also provides different ways to organize your templates and gets you think in components known as Component-driven development. In a React application, you should break down your site, page or feature into smaller pieces of components. It means that your site will be built by the combination of different components. You can also reuse it somewhere else later. Think of it like the bricks of Lego.

Features:

• Lightweight DOM For Better Performance.
• Easy Learning Curve.
• Isolation of the view layer and the encapsulation of responsibilities. Using React you can expect safe and easily understood data flow.
• A desired interface can be created in a relatively easy manner.
• Components Support And Little Dependencies.
• We want to stay DRY and reuse a code base that we find stable and reliable.

In most of our Rails applications, we need technology that provides an easy way of developing rich encapsulated parts, scattered through different routes. In our opinion, React shines for this kind of job.

Virtual DOM

To track down model changes and apply them on the DOM, we have to be aware of two important things: when data has changed and which DOM element(s) to be updated supporting element creation, diff computation and patch operations for efficient re-rendering.

How to render on the server too?

React is also smart enough to recognize that the markup is already there (from the server) and will add only the event handlers on the client side.

JSX JSX is a JavaScript syntax extension that looks similar to XML. Recommended using JSX because it is a concise and familiar syntax for defining tree structures with attributes. XML has the benefit of balanced opening and closing tags. This helps make large trees easier to read than function calls or object literals.

How to test React app:

1. Test React apps with Jest which is a test framework by Facebook and has many great features. 2. Pass the properties to our component, trigger the possible events and check the rendered output.

Cryptex Technologies make the best possible use of react technology for making better functionality app.

Cryptex Technologies is a Ruby on Rails web Development in India who offers zero risk to customers by giving free trails for first two pages to build trust as well as new relationship.

Specialties of Rails 5 in the Software Development Sector

Core team involved in development of Rails has always known for major releases, which it releases on a period of two years. This time, Rails developers have come up with the latest version as Rails 5. To some extent, one can consider the new launch as point release in 4.x line based on upgrades or features. However, the fact is that latest Rail framework has dropped its support for MRI and thereby, becomes a latest change of the software development industry.

Some Features of Rails5 Version

Until now, features of latest rails version, which make top preference among modern web developers are mentioned here.

Rails 5 is able to perform its functions only on Ruby 2.2.1 and its higher versions Allows for merger of Rails Application Program Index into Rails The latest version of Rails framework is able to point towards the rack master.

Turbolinks

Latest framework of Rail is different from any other alternative available in the industry because rather than simply replacing the element on any page tailoring of the response from the server side, Rails 5 replaces by default the entire body and allow users to specify about elements to be replaced according to opt-in basis.

Action Cable

Latest version of Rails developed by experienced developers is that it is able to integrate WebSockets in seamless manner with remaining part of the Rails application.

Running of Single and Multiple Files

Lastly, latest Rails framework helps web developers to operate a single test by simply appending a particular line number towards the filename, while it runs more than one file and directory simultaneously. Cryptex Technologies ruby on rails developers in india hold expertise in using rails 5 in the most explicit manner.