-3
I’m developing a web platform to create some specific questionnaires. For now, I just want to read the question statement and the list of alternative answers, depending on the type of question. I have the following form:
I wanted to make a joke, so that while the person is writing in the "Enunciation" field, the little speech balloon of the character on the right side will be filled with whatever the person is typing in the referred field.
Does anyone have any ideas to help me?
- Extra: Finishing this part of Front-End, I need to do some processing with this data. I have researched a little about Back-End development, use of AJAX, etc. If someone can recommend me some framework to help this connection or something, give a light on how to proceed to integrate the Back-End with what is already done, is welcome.
Edit1: I just realized that I can only click on the text field "Title of the questionnaire" to enter text. In the others, "Enunciation" and "Attributes" can not click to enter with text. Does not appear that "pointer" typing at mouse click. Follow the code (there are some incomplete things from Angularjs that I was testing, just ignore).
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body>
<div ng-app="meuApp" ng-controller="principalCtrl">
<div class="container">
<div class="col-md-8 col-md-offset-2">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<div class ="center-block">
<div class="form-group">
<label for="tituloQ">Título do questionário:</label>
<input type="text" ng-model="tituloQue" name="tituloQ" id="tituloQ"/>
<hr>
<h1>Hello {{tituloQue}}!</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="col-md-8 col-md-offset-2">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<div class ="center-block">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Criar pergunta
<span class="caret"></span></a>
<ul class="dropdown-menu ">
<li><a href="#tab_PA" data-toggle="tab"> Criar pergunta texto livre</a></li>
<li><a href="#tab_PME" data-toggle="tab"> Criar pergunta multipla escolha</a></li>
<li><a href="#tab_PEU" data-toggle="tab"> Criar pergunta escolha única</a></li>
</ul>
</li>
<li role="presentation"><a href="#tab_T" aria-controls="tab_T" role="tab" data-toggle="tab">Temas</a></li>
<li role="presentation"><a href="#tab_P" aria-controls="tab_P" role="tab" data-toggle="tab">Pré-Visualizar</a></li>
</ul>
</div>
</div>
<div class="panel-body">
<div class="row">
<div class="tab-content col-md-6" >
<div role="tabpanel" class="tab-pane" id="tab_T">
Temas
</div>
<div role="tabpanel" class="tab-pane" id="tab_P">
Pré-visualização
</div>
<div role="tabpanel" class="tab-pane active" id="tab_PA">
<div class="form-group">
<div class="form-group">
<label>Enunciado:</label>
<input type="text" ng-model="enunciadoPA">
<br>
<h1>Hello {{enunciadoPA}}!</h1>
</div>
<div class="row">
<div class="form-group">
<label for="atributoPA">Atributos:</label><br>
<input type="text" name="atributoPA" id="atributoPA"> <br>
<small id="emailHelp" class="text-muted">Separe os atributos com traço, ' - '.</small>
</div>
</div>
<input type="submit" name="addP" value="Adicionar Pergunta">
</div>
</div>
<div role="tabpanel" class="tab-pane" id="tab_PME">
<div class="form-group">
<label for="enunciadoPME">Enunciado:</label><br>
<input type="text" name="enunciadoPME" id="enunciadoPME">
</div>
<div class="form-group">
<label for="atributoPME">Atributos:</label><br>
<input type="text" name="atributoPME" id="atributoPME"> <br>
<small id="emailHelp1" class="text-muted">Separe os atributos com traço, ' - '.</small>
</div>
<div class="form-group">
<label for="opcoesPME">Grupo de opções:</label><br>
<input type="text" name="opcoesPME" id="opcoesPME"> <br>
<small id="emailHelp2" class="text-muted">Separe as opções de resposta com traço, ' - '.</small>
</div>
<input type="submit" name="addP" value="Adicionar Pergunta">
</div>
<div role="tabpanel" class="tab-pane" id="tab_EU">
<form action="/efetivar.php" method="POST">
<div class="form-group">
<label for="enunciadoPEU">Enunciado:</label><br>
<input type="text" name="enunciadoPEU" id="enunciadoPEU">
</div>
<div class="form-group">
<label for="atributoPEU">Atributos:</label><br>
<input type="text" name="atributoPEU" id="atributoPEU"> <br>
<small id="emailHelp3" class="text-muted">Separe os atributos com traço, ' - '.</small>
</div>
<div class="form-group">
<label for="opcoesPEU">Grupo de opções:</label><br>
<input type="text" name="opcoesPEU" id="opcoesPEU"> <br>
<small id="emailHelp3" class="text-muted">Separe as opções de resposta com traço, ' - '.</small>
</div>
<input type="submit" name="addP" value="Adicionar Pergunta">
</form>
</div>
</div>
<div class="col-md-6 text-center">
<img src="imagens/feliz.png" width="350" height="280" />
</div>
</div>
</div>
</div>
</div>
</div>
<!-- SCRIPTS/BIBLIOTECAS -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- SCRIPTS ANGULARJS -->
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
</div>
</body>
</html>
You are using Jquery or pure Javascript only?
– Edenilson Bila
Put your Html here to help
– Edenilson Bila
You could use some Js framework that uses data-Binding: Angular Js, Vuejs. This would make your job a lot easier, search for some of these tools
– Felipe Coelho
Without code it gets tricky to help.
– Sam
put your code
– User1999
I edited the question with another question and added HTML.
– Acreano Dingo-Dingo
@Acreanodingo-Dingo if you change the question as you discover mistakes the answers will be all useless. Please ask 1 question and if you discover other problems you cannot solve, ask a new question if there is no answer already on the site for this type of problem.
– Sergio
Put your site in Codepen.io, with CSS, all added Avascripts, so we can reproduce the real problem. The way you are not to understand. But I SUPPOSE it is some CSS problem, where some div of yours is going over INPUT. But to be sure we need the full code.
– Guilherme IA