Experience HTML5 / Présentation d'image sur caneva

Je souhaite faire une page qui va dans un premier onglet déroulant récupérer des informations dans un formulaire et quelques informations d'identification de type date et adresse ip.

Deuxième onglet un canevas (zone de dessin) va exposer une mire a l'écran que l'internaute va devoir faire correspondre en taille avec un élément physique classique (une carte format carte de crédit qu'il va poser sur son écran ) ce qui va nous permettre de faire une mesure de rapport entre la taille des pixels affichée et la taille perçu.

Troisième onglet une séquence de présentation de deux images plein écran dans un rapport fixe selon la mesure précédente.
Les images devront avoir été préchargée pour ne souffrir aucun retard, elle seront tirées au hasard dans un groupe de 200images.
Les internautes devront via des entrées clavier sélectionner une image de droite ou de gauche, puis un écran neutre puis de nouveau deux images s'affichent.
Des mesures seront faites du temps de réponses des internautes ainsi que de leurs choix.
L'ensemble des informations seront transmises sur un serveur une fois l'opération terminée.

On voudrais également pouvoir filmer les internautes pendant la passation de l'épreuve via leur webcam.

Je maitrise les grandes lignes du travail et les codes utilisable mais j'ai beaucoup d'autres choses a faire en ce moment donc je voudrais bien de l'aide pour accélérer.