Compare commits
10 Commits
1dab26397a
...
a6c68f3598
| Author | SHA1 | Date |
|---|---|---|
torun23
|
a6c68f3598 | |
|
torun23
|
b5da349861 | |
|
torun23
|
7a58576a1d | |
|
torun23
|
b027df8f68 | |
|
torun23
|
2e5e30aa1e | |
|
torun23
|
fe5ee0596c | |
|
torun23
|
5163666799 | |
|
torun23
|
c0ab635411 | |
|
torun23
|
21213a9f21 | |
|
torun23
|
f944a7637c |
|
|
@ -1,6 +0,0 @@
|
|||
<IfModule authz_core_module>
|
||||
Require all denied
|
||||
</IfModule>
|
||||
<IfModule !authz_core_module>
|
||||
Deny from all
|
||||
</IfModule>
|
||||
|
|
@ -76,8 +76,8 @@ $query_builder = TRUE;
|
|||
$db['default'] = array(
|
||||
'dsn' => '',
|
||||
'hostname' => 'localhost',
|
||||
'username' => 'admin',
|
||||
'password' => 'Password',
|
||||
'username' => 'torun',
|
||||
'password' => 'thug@NIT20',
|
||||
'database' => 'google_forms',
|
||||
'dbdriver' => 'mysqli',
|
||||
'dbprefix' => '',
|
||||
|
|
|
|||
|
|
@ -1,11 +1,29 @@
|
|||
<?php
|
||||
defined('BASEPATH') OR exit('No direct script access allowed');
|
||||
|
||||
$route['forms'] = 'Form_controller/index';
|
||||
$route['forms'] = 'home/index4';
|
||||
|
||||
$route['default_controller'] = 'home/index2';
|
||||
$route['responses/list/(:num)'] = 'Response_submit/list_responses/$1';
|
||||
$route['responses/view/(:num)'] = 'Response_submit/viewresponse/$1';
|
||||
$route['publish/(:num)'] = 'forms/preview/$1';
|
||||
$route['default_controller'] = 'Form_controller/index_forms';
|
||||
$route['404_override'] = '';
|
||||
$route['translate_uri_dashes'] = FALSE;
|
||||
$route['start'] = 'home/index';
|
||||
$route['start'] = 'Form_controller/index_forms';
|
||||
// $route['new_form'] = 'home/create_form';
|
||||
$route['title_desc'] = 'homepage/title';
|
||||
$route['forms/delete/(:any)'] = 'Form_controller/delete/$1';
|
||||
$route['home'] = 'Form_controller/index_forms';
|
||||
$route['published_forms'] = 'Publish_controller/list_user_published_forms';
|
||||
$route['drafts'] = 'Form_controller/index_forms_draft';
|
||||
|
||||
$route['edit/(:num)'] = 'Form_controller/edit_form/$1';
|
||||
|
||||
$route['form_preview/(:num)'] = 'forms/preview_back/$1';
|
||||
$route['responses/(:num)'] = 'Response_submit/view_responses/$1';
|
||||
$route['designform/(:num)'] = 'homepage/design_form/$1';
|
||||
$route['response_preview/(:num)'] = 'forms/response_preview/$1';
|
||||
|
||||
$route['title'] = 'homepage/title';
|
||||
|
||||
// $route['designform'] = 'homepage/design_form';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
<?php
|
||||
defined('BASEPATH') OR exit('No direct script access allowed');
|
||||
|
||||
class Form extends CI_Controller {
|
||||
|
||||
public function __construct() {
|
||||
parent::__construct();
|
||||
$this->load->model('Form_model');
|
||||
}
|
||||
|
||||
public function submit() {
|
||||
if (!$this->session->userdata('logged_in')) {
|
||||
// If not logged in, redirect to login page
|
||||
redirect('users/login');
|
||||
}
|
||||
$form_data = json_decode($this->input->raw_input_stream, true);
|
||||
|
||||
if ($this->Form_model->save_form($form_data)) {
|
||||
$response = array('status' => 'success', 'message' => 'Form submitted successfully.');
|
||||
} else {
|
||||
$response = array('status' => 'error', 'message' => 'Error submitting form.');
|
||||
}
|
||||
|
||||
echo json_encode($response);
|
||||
}
|
||||
|
||||
public function view($form_id) {
|
||||
$data['title'] = $this->Form_model->get_form_title($form_id);
|
||||
|
||||
if ($data['title'] === null) {
|
||||
show_404(); // Show 404 if form_id is invalid
|
||||
}
|
||||
|
||||
$this->load->view('templates/forms_ui',$data);
|
||||
}
|
||||
}
|
||||
|
|
@ -3,8 +3,119 @@ defined('BASEPATH') OR exit('No direct script access allowed');
|
|||
|
||||
class Form_controller extends CI_Controller {
|
||||
|
||||
public function index()
|
||||
public function index_forms($form_id = null)
|
||||
{
|
||||
$this->load->view('templates/forms_ui');
|
||||
$this->load->model('Frontend_model');
|
||||
// Check if the user is logged in
|
||||
if (!$this->session->userdata('logged_in')) {
|
||||
// If not logged in, redirect to login page
|
||||
redirect('users/login');
|
||||
}
|
||||
|
||||
// Retrieve form title from the forms table using form_id
|
||||
$form_title = 'Untitled Form'; // Default title
|
||||
if ($form_id) {
|
||||
$form = $this->Frontend_model->getFormById($form_id);
|
||||
if ($form) {
|
||||
$form_title = $form['title'];
|
||||
}
|
||||
}
|
||||
|
||||
// Load views and data if user is logged in
|
||||
$this->load->view('templates/header');
|
||||
|
||||
$data = $this->Frontend_model->getforms();
|
||||
$this->load->view('Tables/list_forms', ['forms' => $data, 'form_title' => $form_title]);
|
||||
|
||||
$this->load->view('templates/footer');
|
||||
}
|
||||
|
||||
public function delete($id)
|
||||
{
|
||||
if (!$this->session->userdata('logged_in')) {
|
||||
// If not logged in, redirect to login page
|
||||
redirect('users/login');
|
||||
}
|
||||
$this->load->model('Frontend_model');
|
||||
$this->Frontend_model->deleteForm($id);
|
||||
$this->session->set_flashdata('status','Form data deleted successfully');
|
||||
redirect('home');
|
||||
}
|
||||
public function __construct() {
|
||||
parent::__construct();
|
||||
$this->load->model('Updation_model');
|
||||
}
|
||||
|
||||
// Load the form for editing
|
||||
public function edit_form($form_id) {
|
||||
$data['form'] = $this->Updation_model->get_form($form_id);
|
||||
$data['questions'] = $this->Updation_model->get_questions($form_id);
|
||||
$data['options'] = $this->Updation_model->get_options();
|
||||
|
||||
// $this->load->view('templates/header');
|
||||
$this->load->view('edit_form_view', $data);
|
||||
// $this->load->view('templates/footer');
|
||||
|
||||
}
|
||||
|
||||
// Save the edited form
|
||||
public function update_form() {
|
||||
$formData = $this->input->post('formData');
|
||||
|
||||
if (!$formData) {
|
||||
echo json_encode(['status' => 'error', 'message' => 'Form data is missing']);
|
||||
return;
|
||||
}
|
||||
|
||||
$form_id = $formData['form_id'];
|
||||
$title = $formData['title'];
|
||||
$description = $formData['description'];
|
||||
$questions = $formData['questions'];
|
||||
|
||||
$this->load->model('Updation_model');
|
||||
$updateStatus = $this->Updation_model->update_form_data($form_id, $title, $description, $questions);
|
||||
|
||||
if ($updateStatus) {
|
||||
echo json_encode(['status' => 'success', 'message' => 'Form updated successfully']);
|
||||
} else {
|
||||
echo json_encode(['status' => 'error', 'message' => 'Failed to update form data']);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
public function index_forms_draft($form_id = null) {
|
||||
$this->load->model('Frontend_model');
|
||||
|
||||
// Check if the user is logged in
|
||||
if (!$this->session->userdata('logged_in')) {
|
||||
// If not logged in, redirect to login page
|
||||
redirect('users/login');
|
||||
}
|
||||
|
||||
// Retrieve form title from the forms table using form_id
|
||||
$form_title = 'Untitled Form'; // Default title
|
||||
if ($form_id) {
|
||||
$form = $this->Frontend_model->getFormById($form_id);
|
||||
if ($form) {
|
||||
$form_title = $form['title'];
|
||||
}
|
||||
}
|
||||
|
||||
// Get the user_id from session
|
||||
$user_id = $this->session->userdata('user_id');
|
||||
|
||||
// Load views and data if user is logged in
|
||||
$this->load->view('templates/header');
|
||||
|
||||
// Get the forms created by the user
|
||||
$data = $this->Frontend_model->getforms_draft($user_id);
|
||||
$this->load->view('Tables/draft', ['forms' => $data, 'form_title' => $form_title]);
|
||||
|
||||
$this->load->view('templates/footer');
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<?php
|
||||
defined('BASEPATH') or exit('No direct script access allowed');
|
||||
|
||||
class Forms extends CI_Controller
|
||||
{
|
||||
public function preview($form_id)
|
||||
{
|
||||
if (!$this->session->userdata('logged_in')) {
|
||||
// If not logged in, redirect to login page
|
||||
redirect('users/login');
|
||||
}
|
||||
// Load the model that handles the form data
|
||||
$this->load->model('preview_model');
|
||||
|
||||
// Fetch the form details
|
||||
$form = $this->preview_model->get_form($form_id);
|
||||
|
||||
// Fetch the questions for the form
|
||||
$questions = $this->preview_model->get_questions($form_id);
|
||||
|
||||
// Fetch the options for each question
|
||||
foreach ($questions as &$question) {
|
||||
$question->options = $this->preview_model->get_options($question->id);
|
||||
}
|
||||
|
||||
// Pass the data to the view
|
||||
$data['form'] = $form;
|
||||
$data['questions'] = $questions;
|
||||
|
||||
$this->load->view('templates/header');
|
||||
|
||||
$this->load->view('form_preview', $data);
|
||||
$this->load->view('templates/footer');
|
||||
|
||||
}
|
||||
|
||||
public function response_preview($form_id)
|
||||
{
|
||||
if (!$this->session->userdata('logged_in')) {
|
||||
// If not logged in, redirect to login page
|
||||
redirect('users/login/'.$form_id);
|
||||
}
|
||||
|
||||
// Load the model that handles the form data
|
||||
$this->load->model('preview_model');
|
||||
|
||||
// Fetch the form details
|
||||
$form = $this->preview_model->get_form($form_id);
|
||||
|
||||
// Fetch the questions for the form
|
||||
$questions = $this->preview_model->get_questions($form_id);
|
||||
|
||||
// Fetch the options for each question
|
||||
foreach ($questions as &$question) {
|
||||
$question->options = $this->preview_model->get_options($question->id);
|
||||
}
|
||||
|
||||
// Pass the data to the view
|
||||
$data['form'] = $form;
|
||||
$data['questions'] = $questions;
|
||||
|
||||
$this->load->view('response_submit', $data);
|
||||
}
|
||||
public function preview_back($form_id) {
|
||||
if (!$this->session->userdata('logged_in')) {
|
||||
// If not logged in, redirect to login page
|
||||
redirect('users/login');
|
||||
}
|
||||
|
||||
// Load the model that handles the form data
|
||||
$this->load->model('preview_model');
|
||||
|
||||
// Fetch the form details
|
||||
$form = $this->preview_model->get_form($form_id);
|
||||
|
||||
// Fetch the questions for the form including 'is_required'
|
||||
$questions = $this->preview_model->get_questions($form_id);
|
||||
|
||||
// Fetch the options for each question
|
||||
foreach ($questions as &$question) {
|
||||
$question->options = $this->preview_model->get_options($question->id);
|
||||
}
|
||||
|
||||
// Pass the data to the view
|
||||
$data['form'] = $form;
|
||||
$data['questions'] = $questions;
|
||||
|
||||
$this->load->view('templates/header');
|
||||
$this->load->view('form_preview_back', $data);
|
||||
$this->load->view('templates/footer');
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<?php
|
||||
defined('BASEPATH') or exit('No direct script access allowed');
|
||||
|
||||
class Home extends CI_Controller
|
||||
{
|
||||
|
||||
public function index()
|
||||
{
|
||||
$this->load->view('templates/header');
|
||||
$this->load->view('templates/footer');
|
||||
|
||||
}
|
||||
|
||||
public function index1()
|
||||
{
|
||||
$this->load->view('templates/header');
|
||||
$this->load->view('pages/about');
|
||||
$this->load->view('templates/footer');
|
||||
|
||||
|
||||
}
|
||||
public function index2()
|
||||
{
|
||||
$this->load->view('templates/header');
|
||||
$this->load->view('pages/formspage');
|
||||
$this->load->view('templates/footer');
|
||||
|
||||
|
||||
}
|
||||
public function index3()
|
||||
{
|
||||
$this->load->view('templates/header');
|
||||
$this->load->view('pages/homepage');
|
||||
$this->load->view('templates/footer');
|
||||
}
|
||||
|
||||
public function create_form(){
|
||||
$this->load->view('templates/forms_ui');
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<?php
|
||||
defined('BASEPATH') or exit('No direct script access allowed');
|
||||
|
||||
class Homepage extends CI_Controller
|
||||
{
|
||||
|
||||
// index2-default
|
||||
public function home()
|
||||
{
|
||||
$this->load->view('Frontend/header');
|
||||
|
||||
$this->load->view('Form_controller/index_forms');
|
||||
$this->load->view('Frontend/footer');
|
||||
}
|
||||
|
||||
public function design_form()
|
||||
{
|
||||
|
||||
$this->load->view('templates/forms_ui');
|
||||
|
||||
}
|
||||
public function title()
|
||||
{
|
||||
$this->load->view('templates/header');
|
||||
$this->load->view('templates/form_title');
|
||||
$this->load->view('templates/footer');
|
||||
|
||||
}
|
||||
public function ui_forms()
|
||||
{
|
||||
$this->load->view('templates/forms_ui');
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<?php
|
||||
class New_form extends CI_Controller
|
||||
{
|
||||
public function create_form() {
|
||||
if (!$this->session->userdata('logged_in')) {
|
||||
// If not logged in, redirect to login page
|
||||
redirect('users/login');
|
||||
}
|
||||
|
||||
$data['title'] = 'Form Details';
|
||||
$this->form_validation->set_rules('title', 'Title', 'required');
|
||||
$this->form_validation->set_rules('description', 'Description', 'required');
|
||||
|
||||
if ($this->form_validation->run() === FALSE) {
|
||||
$this->load->view('templates/header');
|
||||
$this->load->view('templates/form_title', $data);
|
||||
$this->load->view('templates/footer');
|
||||
} else {
|
||||
$this->load->model('create_model');
|
||||
$form_id = $this->create_model->details(); // Get the new form_id
|
||||
|
||||
// Redirect to the form view with the form_id
|
||||
redirect('form/view/' . $form_id);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
?>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<?php
|
||||
defined('BASEPATH') OR exit('No direct script access allowed');
|
||||
|
||||
class New_form_controller extends CI_Controller {
|
||||
|
||||
public function submit_form() {
|
||||
if (!$this->session->userdata('logged_in')) {
|
||||
// If not logged in, redirect to login page
|
||||
echo json_encode(['status' => 'error', 'message' => 'User not logged in']);
|
||||
return;
|
||||
}
|
||||
|
||||
// Decode the formData from the POST request
|
||||
$formData = $this->input->post('formData');
|
||||
// Check if form_id is set in session
|
||||
$formId = $this->session->userdata('form_id');
|
||||
if ($formId) {
|
||||
// Load the model and save form data
|
||||
$this->load->model('new_form_model');
|
||||
$saveStatus = $this->new_form_model->save_form_data($formId, $formData);
|
||||
|
||||
if ($saveStatus) {
|
||||
echo json_encode(['status' => 'success', 'message' => 'Form data submitted successfully']);
|
||||
} else {
|
||||
echo json_encode(['status' => 'error', 'message' => 'Failed to save form data']);
|
||||
}
|
||||
} else {
|
||||
echo json_encode(['status' => 'error', 'message' => 'Form ID not found in session']);
|
||||
}
|
||||
}
|
||||
}
|
||||
?>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<?php
|
||||
defined('BASEPATH') OR exit('No direct script access allowed');
|
||||
|
||||
class Publish_controller extends CI_Controller {
|
||||
|
||||
// Method to publish a form
|
||||
public function publish_form($form_id) {
|
||||
// Generate a unique link
|
||||
if (!$this->session->userdata('logged_in')) {
|
||||
// If not logged in, redirect to login page
|
||||
redirect('users/login');
|
||||
}
|
||||
$response_link = base_url("response_preview/" . $form_id);
|
||||
$this->load->model('Publish_model');
|
||||
// Update is_published to 1 and set the response link
|
||||
$this->Publish_model->update_form($form_id, [
|
||||
'is_published' => 1,
|
||||
'response_link' => $response_link
|
||||
]);
|
||||
|
||||
// Redirect to the list_user_published_forms function
|
||||
redirect('published_forms');
|
||||
}
|
||||
|
||||
// Method to list published forms of a user
|
||||
public function list_user_published_forms() {
|
||||
if (!$this->session->userdata('logged_in')) {
|
||||
// If not logged in, redirect to login page
|
||||
redirect('users/login');
|
||||
}
|
||||
$user_id = $this->session->userdata('user_id');
|
||||
$this->load->model('Publish_model');
|
||||
$data['forms'] = $this->Publish_model->get_published_forms_by_user($user_id);
|
||||
|
||||
$this->load->view('templates/header');
|
||||
$this->load->view('publish_view', $data);
|
||||
$this->load->view('templates/footer');
|
||||
}
|
||||
|
||||
|
||||
// Method to unpublish a form
|
||||
public function unpublish_form($form_id) {
|
||||
if (!$this->session->userdata('logged_in')) {
|
||||
// If not logged in, redirect to login page
|
||||
redirect('users/login');
|
||||
}
|
||||
$this->load->model('Publish_model');
|
||||
// Update is_published to 0
|
||||
$this->Publish_model->update_form($form_id, ['is_published' => 0]);
|
||||
|
||||
// Redirect to the list_user_published_forms function
|
||||
redirect('published_forms');
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<?php
|
||||
class Response_submit extends CI_Controller {
|
||||
|
||||
public function view($form_id) {
|
||||
$this->load->model('Response_model');
|
||||
|
||||
$data['form'] = $this->Response_model->get_form($form_id);
|
||||
$questions = $this->Response_model->get_questions($form_id);
|
||||
|
||||
foreach ($questions as $question) {
|
||||
$question->options = $this->Response_model->get_options($question->id);
|
||||
}
|
||||
|
||||
$data['questions'] = $questions;
|
||||
|
||||
// Redirect to the view_responses function in the Response_submit controller
|
||||
redirect('responses/' . $form_id);
|
||||
}
|
||||
|
||||
public function view_responses($form_id) {
|
||||
$this->load->model('Response_model');
|
||||
|
||||
$data['form'] = $this->Response_model->get_form($form_id);
|
||||
$data['responses'] = $this->Response_model->get_responses_by_form($form_id);
|
||||
|
||||
$this->load->view('templates/header');
|
||||
$this->load->view('responses_list', $data);
|
||||
$this->load->view('templates/footer');
|
||||
}
|
||||
|
||||
|
||||
public function submit_form() {
|
||||
$this->load->model('Response_model');
|
||||
$responses = $this->input->post('responses');
|
||||
$user_id = $this->session->userdata('user_id'); // Assuming user_id is stored in session
|
||||
$form_id = $this->input->post('form_id'); // Assuming form_id is passed
|
||||
|
||||
// Insert into responses table
|
||||
$response_id = $this->Response_model->insert_response([
|
||||
'form_id' => $form_id,
|
||||
'user_id' => $user_id,
|
||||
'submitted_at' => date('Y-m-d H:i:s')
|
||||
]);
|
||||
|
||||
// Insert each answer into response_answers table
|
||||
foreach ($responses as $response) {
|
||||
$answered_text = '';
|
||||
|
||||
if (isset($response['options'])) {
|
||||
if (is_array($response['options'])) {
|
||||
$answered_text = implode(', ', $response['options']);
|
||||
} else {
|
||||
$answered_text = $response['options'];
|
||||
}
|
||||
} else if (isset($response['answered_text'])) {
|
||||
$answered_text = $response['answered_text'];
|
||||
}
|
||||
|
||||
$data = [
|
||||
'response_id' => $response_id,
|
||||
'question_id' => $response['question_id'],
|
||||
'answered_text' => $answered_text,
|
||||
'submitted_at' => date('Y-m-d H:i:s')
|
||||
];
|
||||
|
||||
$this->Response_model->insert_response_answer($data);
|
||||
}
|
||||
|
||||
redirect('responses/' . $form_id);
|
||||
}
|
||||
|
||||
|
||||
// Method to list responses for a form
|
||||
public function list_responses($form_id) {
|
||||
$this->load->model('Response_model');
|
||||
$data['form'] = $this->Response_model->get_form($form_id);
|
||||
$data['responses'] = $this->Response_model->get_responses($form_id);
|
||||
|
||||
$this->load->view('Frontend/header');
|
||||
$this->load->view('responses_list_view', $data);
|
||||
$this->load->view('Frontend/footer');
|
||||
}
|
||||
|
||||
// Method to view questions and answers for a specific response
|
||||
public function viewresponse($response_id) {
|
||||
$this->load->model('Response_model');
|
||||
$data['response'] = $this->Response_model->get_response($response_id);
|
||||
$data['form'] = $this->Response_model->get_form_by_response($response_id); // Get form details
|
||||
$data['questions_and_answers'] = $this->Response_model->get_questions_and_answers($response_id);
|
||||
|
||||
$this->load->view('templates/header');
|
||||
$this->load->view('response_details_view', $data);
|
||||
$this->load->view('templates/footer');
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -27,11 +27,18 @@ class Users extends CI_Controller
|
|||
}
|
||||
|
||||
}
|
||||
//login user
|
||||
|
||||
public function login()
|
||||
|
||||
/**
|
||||
* function to login into google forms
|
||||
* @param null
|
||||
* @return mixed(data return type)
|
||||
* @author torun
|
||||
*/
|
||||
public function login($form_id = null)
|
||||
{
|
||||
$data['title'] = 'Sign In';
|
||||
$data['form_id'] = $form_id;
|
||||
|
||||
$this->form_validation->set_rules('username', 'Username', 'required');
|
||||
$this->form_validation->set_rules('password', 'Password', 'required');
|
||||
|
|
@ -48,22 +55,28 @@ class Users extends CI_Controller
|
|||
$password = md5($this->input->post('password'));
|
||||
$this->load->model('user_model');
|
||||
// Login user
|
||||
$user_id = $this->user_model->login($username, $password);
|
||||
$person_id = $this->user_model->login($username, $password);
|
||||
|
||||
if ($user_id) {
|
||||
if ($person_id) {
|
||||
// Create session
|
||||
$user_data = array(
|
||||
'user_id' => $user_id,
|
||||
'user_id' => $person_id,
|
||||
'username' => $username,
|
||||
'logged_in' => true
|
||||
);
|
||||
|
||||
$this->session->set_userdata($user_data);
|
||||
$person_id = $this->session->userdata('user_id');
|
||||
|
||||
|
||||
// Set message
|
||||
$this->session->set_flashdata('user_loggedin', 'You are now logged in');
|
||||
|
||||
redirect('start');
|
||||
if ($form_id) {
|
||||
redirect('forms/response_preview/'.$form_id);
|
||||
} else {
|
||||
redirect('home'); }
|
||||
|
||||
} else {
|
||||
// Set message
|
||||
$this->session->set_flashdata('login_failed', 'Login is invalid');
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
|
||||
<?php
|
||||
class Create_model extends CI_Model {
|
||||
|
||||
public function details() {
|
||||
// Retrieve user_id from session
|
||||
$user_id = $this->session->userdata('user_id');
|
||||
|
||||
// Prepare data to insert into forms table
|
||||
$data = array(
|
||||
'user_id' => $user_id,
|
||||
'title' => $this->input->post('title'),
|
||||
'description' => $this->input->post('description')
|
||||
);
|
||||
|
||||
// Insert data into forms table
|
||||
$this->db->insert('forms', $data);
|
||||
|
||||
// Store form_id in session
|
||||
$formId = $this->db->insert_id();
|
||||
$this->session->set_userdata('form_id', $formId);
|
||||
|
||||
return $formId;
|
||||
}
|
||||
|
||||
}
|
||||
?>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<?php
|
||||
defined('BASEPATH') OR exit('No direct script access allowed');
|
||||
|
||||
class Form_model extends CI_Model {
|
||||
|
||||
public function save_form($form_data) {
|
||||
$this->db->trans_start();
|
||||
|
||||
foreach ($form_data as $section) {
|
||||
$question_data = array(
|
||||
'form_id' => $section['form_id'],
|
||||
'text' => $section['text'],
|
||||
'type' => $section['type'],
|
||||
'required' => $section['required'],
|
||||
'created_at' => date('Y-m-d H:i:s')
|
||||
);
|
||||
|
||||
$this->db->insert('questions', $question_data);
|
||||
$question_id = $this->db->insert_id();
|
||||
|
||||
foreach ($section['options'] as $option_text) {
|
||||
$option_data = array(
|
||||
'question_id' => $question_id,
|
||||
'option_text' => $option_text,
|
||||
'created_at' => date('Y-m-d H:i:s')
|
||||
);
|
||||
|
||||
$this->db->insert('options', $option_data);
|
||||
}
|
||||
}
|
||||
|
||||
$this->db->trans_complete();
|
||||
|
||||
if ($this->db->trans_status() === FALSE) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
public function __construct() {
|
||||
$this->load->database();
|
||||
}
|
||||
|
||||
public function get_form_title($form_id) {
|
||||
$this->db->select('title'); // Assuming the title column in the forms table is called 'title'
|
||||
$this->db->from('forms');
|
||||
$this->db->where('id', $form_id);
|
||||
$query = $this->db->get();
|
||||
|
||||
if ($query->num_rows() > 0) {
|
||||
return $query->row()->title;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
|
||||
<?php
|
||||
defined('BASEPATH') OR exit('No direct script access allowed');
|
||||
|
||||
class Frontend_model extends CI_Model {
|
||||
public function getforms()
|
||||
{
|
||||
// Get the user_id from session
|
||||
$user_id = $this->session->userdata('user_id');
|
||||
|
||||
// Ensure user_id is set
|
||||
if (!$user_id) {
|
||||
return []; // Return an empty array if user_id is not available
|
||||
}
|
||||
|
||||
// Filter forms by user_id and order by created_at in descending order
|
||||
$this->db->where('user_id', $user_id); // Assuming 'user_id' is the column name in the 'forms' table
|
||||
$this->db->order_by('created_at', 'DESC'); // Order by created_at column, most recent first
|
||||
$query = $this->db->get('forms');
|
||||
|
||||
return $query->result(); // Return the result as an array of objects
|
||||
}
|
||||
|
||||
public function deleteForm($id){
|
||||
return $this->db->delete('forms', ['id' => $id]);
|
||||
}
|
||||
public function getFormById($form_id)
|
||||
{
|
||||
$query = $this->db->get_where('forms', ['id' => $form_id]);
|
||||
return $query->row_array();
|
||||
}
|
||||
public function getforms_draft($user_id) {
|
||||
$this->db->where('is_published', 0); // Filter by unpublished forms
|
||||
$this->db->where('user_id', $user_id); // Filter by user_id
|
||||
$this->db->order_by('created_at', 'DESC'); // Sort by creation date, newest first
|
||||
$query = $this->db->get('forms');
|
||||
return $query->result();
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<?php
|
||||
class New_form_model extends CI_Model {
|
||||
|
||||
public function save_form_data($formId, $formData) {
|
||||
if (!$formId || !isset($formData['questions'])) {
|
||||
return false; // Handle error if formId is not valid or questions are missing
|
||||
}
|
||||
|
||||
$questions_array = $formData['questions'];
|
||||
|
||||
foreach ($questions_array as $question) {
|
||||
$questionData = [
|
||||
'form_id' => $formId,
|
||||
'text' => $question['text'],
|
||||
'type' => $question['type'],
|
||||
'is_required' => isset($question['is_required']) && $question['is_required'] == 'true' ? 1 : 0
|
||||
];
|
||||
|
||||
$this->db->insert('questions', $questionData);
|
||||
$questionId = $this->db->insert_id(); // Get the inserted question_id
|
||||
|
||||
// Handle options for multiple-choice, checkboxes, and dropdown questions
|
||||
if (in_array($question['type'], ['multiple-choice', 'checkboxes', 'dropdown'])) {
|
||||
foreach ($question['options'] as $option) {
|
||||
if (!empty($option)) { // Avoid inserting empty options
|
||||
$optionData = [
|
||||
'question_id' => $questionId,
|
||||
'option_text' => $option // Ensure column name matches database schema
|
||||
];
|
||||
// Insert option into options table
|
||||
$this->db->insert('options', $optionData);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return true; // Return true indicating success
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
?>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<?php
|
||||
class preview_model extends CI_Model {
|
||||
|
||||
public function get_form($form_id) {
|
||||
$this->db->where('id', $form_id);
|
||||
$query = $this->db->get('forms');
|
||||
return $query->row();
|
||||
}
|
||||
|
||||
public function get_questions($form_id) {
|
||||
$this->db->where('form_id', $form_id);
|
||||
$query = $this->db->get('questions');
|
||||
return $query->result(); // Ensure this returns objects with the 'is_required' field
|
||||
}
|
||||
|
||||
public function get_options($question_id) {
|
||||
$this->db->where('question_id', $question_id);
|
||||
$query = $this->db->get('options');
|
||||
return $query->result(); // Ensure this returns the options related to the question
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<?php
|
||||
class Publish_model extends CI_Model {
|
||||
|
||||
// Method to update form details including is_published status
|
||||
public function update_form($form_id, $data) {
|
||||
$this->db->where('id', $form_id);
|
||||
return $this->db->update('forms', $data);
|
||||
}
|
||||
|
||||
// Method to retrieve published forms by user
|
||||
public function get_published_forms_by_user($user_id) {
|
||||
$this->db->where('user_id', $user_id);
|
||||
$this->db->where('is_published', 1);
|
||||
$this->db->order_by('id', 'DESC'); // Order by id column, most recent first
|
||||
$query = $this->db->get('forms');
|
||||
return $query->result();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<?php
|
||||
class Response_model extends CI_Model {
|
||||
// 888888888888888888888
|
||||
|
||||
public function insert_response($data) {
|
||||
$this->db->insert('responses', $data);
|
||||
return $this->db->insert_id();
|
||||
}
|
||||
|
||||
public function insert_response_answer($data) {
|
||||
$this->db->insert('response_answers', $data);
|
||||
}
|
||||
|
||||
public function get_form($form_id) {
|
||||
$this->db->where('id', $form_id);
|
||||
$query = $this->db->get('forms');
|
||||
return $query->row();
|
||||
}
|
||||
|
||||
// 888888888888888888888
|
||||
|
||||
|
||||
public function get_questions($form_id) {
|
||||
$this->db->where('form_id', $form_id);
|
||||
$query = $this->db->get('questions');
|
||||
return $query->result();
|
||||
}
|
||||
|
||||
public function get_options($question_id) {
|
||||
$this->db->where('question_id', $question_id);
|
||||
$query = $this->db->get('options');
|
||||
return $query->result();
|
||||
}
|
||||
// 888888888888888888888
|
||||
|
||||
public function get_responses_by_form($form_id) {
|
||||
$this->db->select('responses.id as response_id, responses.submitted_at, users.username');
|
||||
$this->db->from('responses');
|
||||
$this->db->join('users', 'responses.user_id = users.id');
|
||||
$this->db->where('responses.form_id', $form_id);
|
||||
$query = $this->db->get();
|
||||
$responses = $query->result();
|
||||
|
||||
foreach ($responses as &$response) {
|
||||
$response->answers = $this->get_answers_by_response_id($response->response_id);
|
||||
}
|
||||
|
||||
return $responses;
|
||||
}
|
||||
|
||||
public function get_answers_by_response_id($response_id) {
|
||||
$this->db->select('response_answers.question_id, response_answers.answered_text');
|
||||
$this->db->from('response_answers');
|
||||
$this->db->where('response_answers.response_id', $response_id);
|
||||
$query = $this->db->get();
|
||||
return $query->result();
|
||||
}
|
||||
// 888888888888888888888
|
||||
|
||||
public function get_responses($form_id) {
|
||||
$this->db->where('form_id', $form_id);
|
||||
$query = $this->db->get('responses');
|
||||
return $query->result();
|
||||
}
|
||||
|
||||
|
||||
// Method to get response details
|
||||
public function get_response($response_id) {
|
||||
$this->db->select('responses.*, users.email');
|
||||
$this->db->from('responses');
|
||||
$this->db->join('users', 'responses.user_id = users.id'); // Assuming 'user_id' is the foreign key in 'responses'
|
||||
$this->db->where('responses.id', $response_id);
|
||||
$query = $this->db->get();
|
||||
return $query->row();
|
||||
}
|
||||
|
||||
|
||||
// Method to get questions and answers for a response
|
||||
public function get_questions_and_answers($response_id) {
|
||||
$this->db->select('questions.id AS question_id, questions.text AS question_text, response_answers.answered_text, users.email');
|
||||
$this->db->from('questions');
|
||||
$this->db->join('response_answers', 'questions.id = response_answers.question_id');
|
||||
$this->db->join('responses', 'response_answers.response_id = responses.id');
|
||||
$this->db->join('users', 'responses.user_id = users.id'); // Join to get the user's email
|
||||
$this->db->where('response_answers.response_id', $response_id);
|
||||
$query = $this->db->get();
|
||||
return $query->result();
|
||||
}
|
||||
|
||||
|
||||
public function get_form_by_response($response_id) {
|
||||
$this->db->select('forms.title, forms.description');
|
||||
$this->db->from('forms');
|
||||
$this->db->join('responses', 'forms.id = responses.form_id');
|
||||
$this->db->where('responses.id', $response_id);
|
||||
$query = $this->db->get();
|
||||
return $query->row();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<?php
|
||||
class Updation_model extends CI_Model {
|
||||
|
||||
public function get_form($form_id) {
|
||||
$this->db->where('id', $form_id);
|
||||
$query = $this->db->get('forms');
|
||||
return $query->row_array();
|
||||
}
|
||||
|
||||
public function get_questions($form_id) {
|
||||
$this->db->where('form_id', $form_id);
|
||||
$this->db->order_by('id', 'ASC');
|
||||
$query = $this->db->get('questions');
|
||||
return $query->result_array();
|
||||
}
|
||||
|
||||
public function get_options() {
|
||||
$query = $this->db->get('options');
|
||||
return $query->result_array();
|
||||
}
|
||||
public function update_form_data($form_id, $title, $description, $questions) {
|
||||
$this->db->trans_start();
|
||||
|
||||
// Update form title and description
|
||||
$this->db->where('id', $form_id);
|
||||
$this->db->update('forms', ['title' => $title, 'description' => $description]);
|
||||
|
||||
// Update questions
|
||||
$this->db->where('form_id', $form_id);
|
||||
$this->db->delete('questions');
|
||||
|
||||
foreach ($questions as $question) {
|
||||
$question_data = [
|
||||
'form_id' => $form_id,
|
||||
'text' => $question['text'],
|
||||
'type' => $question['type'],
|
||||
'is_required' => $question['required'] // Correctly capture the required value
|
||||
];
|
||||
$this->db->insert('questions', $question_data);
|
||||
$question_id = $this->db->insert_id();
|
||||
|
||||
if (isset($question['options'])) {
|
||||
foreach ($question['options'] as $option_text) {
|
||||
$option_data = [
|
||||
'question_id' => $question_id,
|
||||
'option_text' => $option_text
|
||||
];
|
||||
$this->db->insert('options', $option_data);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$this->db->trans_complete();
|
||||
|
||||
return $this->db->trans_status();
|
||||
}
|
||||
|
||||
|
||||
private function update_question_options($question_id, $options) {
|
||||
// Fetch existing options for this question
|
||||
$existing_options = $this->db->where('question_id', $question_id)->get('options')->result_array();
|
||||
$existing_option_texts = array_column($existing_options, 'option_text');
|
||||
|
||||
// Insert or update options
|
||||
foreach ($options as $option_text) {
|
||||
if (in_array($option_text, $existing_option_texts)) {
|
||||
// Option already exists, no need to insert
|
||||
continue;
|
||||
}
|
||||
|
||||
// Insert new option
|
||||
$option_data = [
|
||||
'question_id' => $question_id,
|
||||
'option_text' => $option_text
|
||||
];
|
||||
$this->db->insert('options', $option_data);
|
||||
}
|
||||
|
||||
// Delete options that are no longer present
|
||||
$options_to_delete = array_diff($existing_option_texts, $options);
|
||||
if (!empty($options_to_delete)) {
|
||||
$this->db->where('question_id', $question_id);
|
||||
$this->db->where_in('option_text', $options_to_delete);
|
||||
$this->db->delete('options');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
?>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<style>/* CSS styles */
|
||||
.title-column {
|
||||
color: darkblue; /* Dark blue color for title */
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 mt-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<?php if ($this->session->flashdata('status')): ?>
|
||||
<div class="alert alert-success">
|
||||
<?= $this->session->flashdata('status'); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<h3>
|
||||
Drafts
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- here your table will occur -->
|
||||
<table id="basetable1" class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Drafts</th>
|
||||
<th>Title</th>
|
||||
<th>Created On</th>
|
||||
<th>Edit</th>
|
||||
<th>Delete</th>
|
||||
<th>Preview</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php
|
||||
$serialNumber = 1; // Initialize the counter variable
|
||||
foreach ($forms as $row): ?>
|
||||
<tr>
|
||||
<td><?php echo $serialNumber++; ?></td>
|
||||
<td class="title-column">
|
||||
<?php echo $row->title; ?>
|
||||
</td>
|
||||
|
||||
<td><?php echo $row->created_at; ?></td>
|
||||
<td>
|
||||
<a href="<?php echo base_url('edit/' . $row->id); ?>"
|
||||
class="btn btn-success btn-sm " style=" background-color: rgb(103, 58, 183); border-color: rgb(103, 58, 183); color: white;">Edit</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="<?php echo base_url('forms/delete/' . $row->id); ?>"
|
||||
class="btn btn-danger btn-sm" style=" background-color: rgb(103, 58, 183); border-color: rgb(103, 58, 183); color: white;">Delete</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="<?php echo base_url('form_preview/' . $row->id); ?>">
|
||||
<i class="fas fa-eye"></i> <!-- Eye icon -->
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Other head elements -->
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Form List</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
<link rel="stylesheet" href="styles.css"> <!-- Link to your stylesheet -->
|
||||
</head>
|
||||
<body>
|
||||
<style>/* CSS styles */
|
||||
.title-column {
|
||||
color: darkblue; /* Dark blue color for title */
|
||||
}
|
||||
|
||||
.draft-row {
|
||||
background-color: #f0f0f0; /* Light grey background for draft status */
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 mt-4 ">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<?php if ($this->session->flashdata('status')): ?>
|
||||
<div class="alert alert-success">
|
||||
<?= $this->session->flashdata('status'); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<h3>
|
||||
List of Forms
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- here your table will occur -->
|
||||
<table id="basetable1" class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Forms</th>
|
||||
<th>Title</th>
|
||||
<th>Description</th>
|
||||
<th>Created On</th>
|
||||
<th>Status</th>
|
||||
<th>Preview</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php
|
||||
$serialNumber = 1; // Initialize the counter variable
|
||||
foreach ($forms as $row): ?>
|
||||
<tr class="<?php echo ($row->is_published ? '' : 'draft-row'); ?>">
|
||||
<td><?php echo $serialNumber++; ?></td>
|
||||
<td class="title-column">
|
||||
<?php echo $row->title; ?>
|
||||
</td>
|
||||
<td><?php echo $row->description; ?></td>
|
||||
<td><?php echo $row->created_at; ?></td>
|
||||
<td><?php echo ($row->is_published ? 'Published' : 'Draft'); ?></td>
|
||||
<td>
|
||||
<a href="<?php echo base_url('form_preview/' . $row->id); ?>">
|
||||
<i class="fas fa-eye"></i> <!-- Eye icon -->
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function updateSerialNumbers() {
|
||||
const table = document.getElementById('basetable1');
|
||||
const rows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
|
||||
for (let i = 0; i < rows.length; i++) {
|
||||
rows[i].getElementsByClassName('serial-number')[0].innerText = i + 1;
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', updateSerialNumbers);
|
||||
// If you have sorting functionality, call updateSerialNumbers after sorting
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,291 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Edit Form</title>
|
||||
<link rel="stylesheet" href="https://bootswatch.com/3/flatly/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/styles.css">
|
||||
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/header_new.css">
|
||||
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/jquery-ui.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar navbar-custom">
|
||||
<div class="container">
|
||||
<?php if ($this->session->userdata('logged_in')): ?>
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-brand" href="<?php echo base_url(); ?>">Google Forms</a>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div id="navbar">
|
||||
<ul class="nav navbar-nav left">
|
||||
<?php if ($this->session->userdata('logged_in')): ?>
|
||||
<li><a href="<?php echo base_url(); ?>published_forms">Published Forms</a></li>
|
||||
<li><a href="<?php echo base_url(); ?>drafts">Drafts</a></li>
|
||||
<?php endif; ?>
|
||||
</ul>
|
||||
<ul class="nav navbar-nav right">
|
||||
<?php if (!$this->session->userdata('logged_in')): ?>
|
||||
<li><a href="<?php echo base_url(); ?>users/login">Login</a></li>
|
||||
<li><a href="<?php echo base_url(); ?>users/register">Register</a></li>
|
||||
<?php endif; ?>
|
||||
<?php if ($this->session->userdata('logged_in')): ?>
|
||||
<li><a href="<?php echo base_url(); ?>homepage/title">Create Form</a></li>
|
||||
<li><a href="<?php echo base_url(); ?>users/logout">Logout</a></li>
|
||||
<?php endif; ?>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Alert Messages -->
|
||||
<div class="container">
|
||||
<?php if ($this->session->flashdata('user_registered')): ?>
|
||||
<p class="alert alert-success"><?php echo $this->session->flashdata('user_registered'); ?></p>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($this->session->flashdata('login_failed')): ?>
|
||||
<p class="alert alert-danger"><?php echo $this->session->flashdata('login_failed'); ?></p>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($this->session->flashdata('user_loggedin')): ?>
|
||||
<p class="alert alert-success"><?php echo $this->session->flashdata('user_loggedin'); ?></p>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($this->session->flashdata('user_loggedout')): ?>
|
||||
<p class="alert alert-success"><?php echo $this->session->flashdata('user_loggedout'); ?></p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<!-- Form Editor -->
|
||||
<div class="container">
|
||||
<div class="form-header">
|
||||
<button id="preview-btn" class="btn btn-info"><i class="fas fa-eye"></i></button>
|
||||
<input type="text" id="form-title" class="form-control" value="<?php echo $form['title']; ?>">
|
||||
<input type="text" id="form-description" class="form-control" value="<?php echo $form['description']; ?>">
|
||||
<button id="add-section-btn" class="btn btn-primary">+</button>
|
||||
</div>
|
||||
<div id="form-container">
|
||||
<?php foreach ($questions as $question): ?>
|
||||
<div class="form-section" data-index="<?php echo $question['id']; ?>" data-type="<?php echo $question['type']; ?>">
|
||||
<div class="header-row">
|
||||
<textarea class="form-control untitled-question" placeholder="Untitled Question" rows="1"><?php echo $question['text']; ?></textarea>
|
||||
<select class="custom-select">
|
||||
<option value="short-answer" <?php echo $question['type'] == 'short-answer' ? 'selected' : ''; ?>>Short Answer</option>
|
||||
<option value="paragraph" <?php echo $question['type'] == 'paragraph' ? 'selected' : ''; ?>>Paragraph</option>
|
||||
<option value="multiple-choice" <?php echo $question['type'] == 'multiple-choice' ? 'selected' : ''; ?>>Multiple Choice</option>
|
||||
<option value="checkboxes" <?php echo $question['type'] == 'checkboxes' ? 'selected' : ''; ?>>Checkboxes</option>
|
||||
<option value="dropdown" <?php echo $question['type'] == 'dropdown' ? 'selected' : ''; ?>>Dropdown</option>
|
||||
</select>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" class="required-toggle" <?php echo $question['is_required'] ? 'checked' : ''; ?>>
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<span class="delete-section-icon"><i class="fas fa-trash-alt"></i></span>
|
||||
</div>
|
||||
<div class="options-container">
|
||||
<?php
|
||||
// Fetch options for this question only
|
||||
$this->db->where('question_id', $question['id']);
|
||||
$options = $this->db->get('options')->result_array();
|
||||
foreach ($options as $option):
|
||||
?>
|
||||
<div class="option">
|
||||
<input type="text" class="form-control option-label" value="<?php echo $option['option_text']; ?>">
|
||||
<span class="delete-option-icon">×</span>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<!-- Show or hide the "Add Option" button based on question type -->
|
||||
<?php if ($question['type'] === 'multiple-choice' || $question['type'] === 'checkboxes' || $question['type'] === 'dropdown'): ?>
|
||||
<button class="btn btn-secondary add-option-btn">Add Option</button>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<button id="submit-btn" class="btn btn-success btn-custom">Submit</button>
|
||||
</div>
|
||||
|
||||
<script src="<?php echo base_url('assets/js/jquery.min.js'); ?>"></script>
|
||||
<script src="<?php echo base_url('assets/js/bootstrap.min.js'); ?>"></script>
|
||||
<script src="<?php echo base_url('assets/js/jquery-ui.js'); ?>"></script>
|
||||
<!-- <script src="<?php echo base_url('assets/js/scripts.js'); ?>"></script> -->
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
var base_url = '<?php echo base_url(); ?>';
|
||||
var index = 1;
|
||||
var activeSection = null;
|
||||
|
||||
function positionAddSectionButton() {
|
||||
if (activeSection) {
|
||||
var position = activeSection.position();
|
||||
var buttonWidth = $('#add-section-btn').outerWidth();
|
||||
var buttonHeight = $('#add-section-btn').outerHeight();
|
||||
|
||||
$('#add-section-btn').css({
|
||||
position: 'absolute',
|
||||
left: position.left - buttonWidth - 47 + 'px',
|
||||
top: position.top + activeSection.height() / 2 - buttonHeight / 2 + 'px'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Add section button functionality
|
||||
$('#add-section-btn').on('click', function() {
|
||||
createFormSection();
|
||||
$('.form-section').removeClass('active');
|
||||
activeSection = $('.form-section').last();
|
||||
activeSection.addClass('active');
|
||||
positionAddSectionButton();
|
||||
});
|
||||
|
||||
function createFormSection() {
|
||||
var sectionHtml = `
|
||||
<div class="form-section" data-type="">
|
||||
<div class="header-row">
|
||||
<textarea class="form-control untitled-question" placeholder="Untitled Question" rows="1"></textarea>
|
||||
<select class="custom-select">
|
||||
<option value="short-answer">Short Answer</option>
|
||||
<option value="paragraph">Paragraph</option>
|
||||
<option value="multiple-choice">Multiple Choice</option>
|
||||
<option value="checkboxes">Checkboxes</option>
|
||||
<option value="dropdown">Dropdown</option>
|
||||
</select>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" class="required-toggle">
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<span class="delete-section-icon"><i class="fas fa-trash-alt"></i></span>
|
||||
</div>
|
||||
<div class="options-container"></div>
|
||||
<button class="btn btn-secondary add-option-btn">Add Option</button>
|
||||
</div>
|
||||
`;
|
||||
$('#form-container').append(sectionHtml);
|
||||
}
|
||||
|
||||
// Handle option button click
|
||||
$(document).on('click', '.add-option-btn', function() {
|
||||
var $section = $(this).closest('.form-section');
|
||||
var optionHtml = `
|
||||
<div class="option">
|
||||
<input type="text" class="form-control option-label" value="">
|
||||
<span class="delete-option-icon">×</span>
|
||||
</div>
|
||||
`;
|
||||
$section.find('.options-container').append(optionHtml);
|
||||
});
|
||||
|
||||
// Handle delete section button click
|
||||
$(document).on('click', '.delete-section-icon', function() {
|
||||
$(this).closest('.form-section').remove();
|
||||
});
|
||||
|
||||
// Handle delete option button click
|
||||
$(document).on('click', '.delete-option-icon', function() {
|
||||
$(this).closest('.option').remove();
|
||||
});
|
||||
|
||||
// Handle preview button click
|
||||
$('#preview-btn').on('click', function() {
|
||||
alert('Preview functionality is not implemented.');
|
||||
});
|
||||
|
||||
// Handle submit button click
|
||||
$('#submit-btn').on('click', function() {
|
||||
var formData = collectFormData();
|
||||
formData['form_id'] = <?php echo $form['id']; ?>;
|
||||
|
||||
let validation = validateFormData(formData);
|
||||
if (!validation.isValid) {
|
||||
alert(validation.message);
|
||||
return;
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: base_url + 'Form_controller/update_form',
|
||||
type: 'POST',
|
||||
data: { formData: formData },
|
||||
dataType: 'JSON',
|
||||
success: function(response) {
|
||||
if (response.status === 'success') {
|
||||
alert('Form updated successfully!');
|
||||
window.location.href = base_url + 'drafts';
|
||||
} else {
|
||||
alert(response.message);
|
||||
}
|
||||
},
|
||||
error: function(error) {
|
||||
alert('Error updating form!');
|
||||
console.log(error);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Collect form data function
|
||||
function collectFormData() {
|
||||
var formData = {
|
||||
title: $('#form-title').val(),
|
||||
description: $('#form-description').val(),
|
||||
questions: []
|
||||
};
|
||||
|
||||
$('.form-section').each(function() {
|
||||
var questionData = {
|
||||
id: $(this).data('index'),
|
||||
text: $(this).find('.untitled-question').val(),
|
||||
type: $(this).find('.custom-select').val(),
|
||||
required: $(this).find('.required-toggle').is(':checked') ? 1 : 0, // Correctly capture the required value
|
||||
options: []
|
||||
};
|
||||
|
||||
$(this).find('.option-label').each(function() {
|
||||
questionData.options.push($(this).val());
|
||||
});
|
||||
|
||||
formData.questions.push(questionData);
|
||||
});
|
||||
|
||||
return formData;
|
||||
}
|
||||
function validateFormData(formData) {
|
||||
for (let question of formData.questions) {
|
||||
if (!question.text.trim()) {
|
||||
return { isValid: false, message: 'All questions must have text.' };
|
||||
}
|
||||
if ((question.type === 'multiple-choice' || question.type === 'checkboxes' || question.type === 'dropdown') && question.options.length === 0) {
|
||||
return { isValid: false, message: 'All options-based questions must have at least one option.' };
|
||||
}
|
||||
for (let option of question.options) {
|
||||
if (!option.trim()) {
|
||||
return { isValid: false, message: 'All options must have text.' };
|
||||
}
|
||||
}
|
||||
}
|
||||
return { isValid: true };
|
||||
}
|
||||
|
||||
// Initialize
|
||||
$('.form-section').each(function() {
|
||||
$(this).on('click', function() {
|
||||
$('.form-section').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
activeSection = $(this);
|
||||
positionAddSectionButton();
|
||||
});
|
||||
});
|
||||
|
||||
// Handle window resize to reposition button
|
||||
$(window).on('resize', function() {
|
||||
positionAddSectionButton();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Form Preview - Google Forms</title>
|
||||
<link rel="stylesheet" href="https://bootswatch.com/3/flatly/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/form_preview.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="form-header">
|
||||
<h2><?php echo $form->title; ?></h2>
|
||||
<br>
|
||||
<h4><?php echo $form->description; ?></h4>
|
||||
</div>
|
||||
|
||||
<?php foreach ($questions as $question): ?>
|
||||
<div class="form-section">
|
||||
<div class="question-section">
|
||||
<p class="question-label"><?php echo $question->text; ?></p>
|
||||
</div>
|
||||
|
||||
<?php if ($question->type == 'multiple-choice'): ?>
|
||||
<div class="options-container">
|
||||
<?php foreach ($question->options as $option): ?>
|
||||
<div class="option">
|
||||
<input type="radio" name="option-<?php echo $question->id; ?>" disabled>
|
||||
<label><?php echo $option->option_text; ?></label>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php elseif ($question->type == 'checkboxes'): ?>
|
||||
<div class="options-container">
|
||||
<?php foreach ($question->options as $option): ?>
|
||||
<div class="option">
|
||||
<input type="checkbox" name="option-<?php echo $question->id; ?>" disabled>
|
||||
<label><?php echo $option->option_text; ?></label>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php elseif ($question->type == 'short-answer'): ?>
|
||||
<div class="options-container">
|
||||
<input type="text" class="form-control" placeholder="Short answer text" disabled>
|
||||
</div>
|
||||
<?php elseif ($question->type == 'paragraph'): ?>
|
||||
<div class="options-container">
|
||||
<textarea class="form-control" placeholder="Paragraph text" disabled></textarea>
|
||||
</div>
|
||||
<?php elseif ($question->type == 'dropdown'): ?>
|
||||
<div class="options-container">
|
||||
<select class="form-control" disabled>
|
||||
<?php foreach ($question->options as $option): ?>
|
||||
<option><?php echo $option->option_text; ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
<a href="<?php echo base_url('Publish_controller/publish_form/'.$form->id); ?>" class="btn btn-success">Publish</a>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Form Preview - Google Forms</title>
|
||||
<link rel="stylesheet" href="https://bootswatch.com/3/flatly/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/form_preview.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="form-header">
|
||||
<h2><?php echo $form->title; ?></h2>
|
||||
<br>
|
||||
<h4><?php echo $form->description; ?></h4>
|
||||
</div>
|
||||
|
||||
<?php foreach ($questions as $question): ?>
|
||||
<div class="form-section">
|
||||
<div class="question-section">
|
||||
<p class="question-label"><?php echo $question->text; ?></p>
|
||||
</div>
|
||||
|
||||
<?php if ($question->type == 'multiple-choice'): ?>
|
||||
<div class="options-container">
|
||||
<?php foreach ($question->options as $option): ?>
|
||||
<div class="option">
|
||||
<input type="radio" name="option-<?php echo $question->id; ?>" disabled>
|
||||
<label><?php echo $option->option_text; ?></label>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php elseif ($question->type == 'checkboxes'): ?>
|
||||
<div class="options-container">
|
||||
<?php foreach ($question->options as $option): ?>
|
||||
<div class="option">
|
||||
<input type="checkbox" name="option-<?php echo $question->id; ?>" disabled>
|
||||
<label><?php echo $option->option_text; ?></label>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php elseif ($question->type == 'short-answer'): ?>
|
||||
<div class="options-container">
|
||||
<input type="text" class="form-control" placeholder="Short answer text" disabled>
|
||||
</div>
|
||||
<?php elseif ($question->type == 'paragraph'): ?>
|
||||
<div class="options-container">
|
||||
<textarea class="form-control" placeholder="Paragraph text" disabled></textarea>
|
||||
</div>
|
||||
<?php elseif ($question->type == 'dropdown'): ?>
|
||||
<div class="options-container">
|
||||
<select class="form-control" disabled>
|
||||
<?php foreach ($question->options as $option): ?>
|
||||
<option><?php echo $option->option_text; ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
<a href="<?php echo base_url('published_forms'); ?>" class="btn btn-success">Back</a>
|
||||
<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<style>/* CSS styles */
|
||||
.title-column {
|
||||
color: darkblue; /* Dark blue color for title */
|
||||
}
|
||||
|
||||
.draft-row {
|
||||
background-color: #f0f0f0; /* Light grey background for draft status */
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 mt-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<?php if ($this->session->flashdata('status')): ?>
|
||||
<div class="alert alert-success">
|
||||
<?= $this->session->flashdata('status'); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<h3>
|
||||
Published Forms
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- here your table will occur -->
|
||||
<table id="basetable1" class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Responses</th>
|
||||
<th>Title</th>
|
||||
<th>Status</th>
|
||||
<th>Response Link</th>
|
||||
<th>Preview</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php $serialNumber = 1;foreach ($forms as $row): ?>
|
||||
<tr>
|
||||
<td><?php echo $serialNumber++; ?></td>
|
||||
<td class="title-column">
|
||||
<?php echo $row->title; ?>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<a href="<?php echo base_url('Publish_controller/unpublish_form/' . $row->id); ?>" class="btn btn-danger btn-sm" style=" background-color: rgb(103, 58, 183); border-color: rgb(103, 58, 183); color: white;">Unpublish</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="<?php echo $row->response_link; ?>" target="_blank"><?php echo $row->response_link; ?></a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="<?php echo base_url('form_preview/' . $row->id); ?>">
|
||||
<i class="fas fa-eye"></i> <!-- Eye icon -->
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Response Details</title>
|
||||
<link rel="stylesheet" href="https://bootswatch.com/3/flatly/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/response_details_view.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="form-header">
|
||||
<h2><?php echo $form->title; ?></h2>
|
||||
<h4 class="form-description"><?php echo $form->description; ?></h4>
|
||||
<p class="submitted-at">Submitted At: <?php echo $response->submitted_at; ?></p>
|
||||
<p class="user-email">User Email: <?php echo $response->email; ?></p>
|
||||
</div>
|
||||
<?php foreach ($questions_and_answers as $question): ?>
|
||||
<div class="form-section">
|
||||
<div class="question-section">
|
||||
<p class="form-control question-label"><?php echo $question->question_text; ?></p>
|
||||
<div class="form-control" disabled><?php echo $question->answered_text; ?></div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Form Preview - Google Forms</title>
|
||||
<link rel="stylesheet" href="https://bootswatch.com/3/flatly/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/response_submit.css">
|
||||
|
||||
<script>
|
||||
function validateForm() {
|
||||
let isValid = true;
|
||||
document.querySelectorAll('.question-container').forEach(function(container) {
|
||||
let isRequired = container.dataset.required === '1';
|
||||
let questionType = container.dataset.type;
|
||||
let isAnswered = false;
|
||||
|
||||
// Select inputs relevant to the question type
|
||||
let inputs = container.querySelectorAll('input[type="text"], textarea, select, input[type="radio"]:checked, input[type="checkbox"]:checked');
|
||||
if (inputs.length > 0) {
|
||||
inputs.forEach(function(input) {
|
||||
if (input.type === 'text' || input.tagName.toLowerCase() === 'textarea') {
|
||||
if (input.value.trim() !== '') {
|
||||
isAnswered = true;
|
||||
}
|
||||
} else if (input.type === 'radio' || input.type === 'checkbox') {
|
||||
isAnswered = true;
|
||||
} else if (input.tagName.toLowerCase() === 'select') {
|
||||
if (input.value.trim() !== '') {
|
||||
isAnswered = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (isRequired && !isAnswered) {
|
||||
container.style.border = '2px solid purple';
|
||||
isValid = false;
|
||||
} else {
|
||||
container.style.border = 'none';
|
||||
}
|
||||
});
|
||||
return isValid;
|
||||
}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="form-header">
|
||||
<h2><?php echo $form->title; ?></h2>
|
||||
<h4><?php echo $form->description; ?></h4>
|
||||
</div>
|
||||
<form action="<?php echo base_url('response_submit/submit_form'); ?>" method="post" onsubmit="return validateForm();">
|
||||
<input type="hidden" name="form_id" value="<?php echo $form->id; ?>">
|
||||
<div class="form-section">
|
||||
<?php foreach ($questions as $question): ?>
|
||||
<div class="question-container" data-required="<?php echo $question->is_required; ?>">
|
||||
<input type="hidden" name="responses[<?php echo $question->id; ?>][question_id]" value="<?php echo $question->id; ?>">
|
||||
<input type="hidden" name="responses[<?php echo $question->id; ?>][form_id]" value="<?php echo $form->id; ?>">
|
||||
<label class="<?php echo $question->is_required ? 'required-field' : ''; ?>"><?php echo $question->text; ?></label>
|
||||
<?php if ($question->type == 'multiple-choice'): ?>
|
||||
<?php foreach ($question->options as $option): ?>
|
||||
<div class="option">
|
||||
<input type="radio" name="responses[<?php echo $question->id; ?>][options][]" value="<?php echo $option->option_text; ?>">
|
||||
<label><?php echo $option->option_text; ?></label>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
<?php elseif ($question->type == 'checkboxes'): ?>
|
||||
<?php foreach ($question->options as $option): ?>
|
||||
<div class="option">
|
||||
<input type="checkbox" name="responses[<?php echo $question->id; ?>][options][]" value="<?php echo $option->option_text; ?>">
|
||||
<label><?php echo $option->option_text; ?></label>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
<?php elseif ($question->type == 'short-answer'): ?>
|
||||
<input type="text" class="form-control" name="responses[<?php echo $question->id; ?>][answered_text]" placeholder="Short answer text">
|
||||
<?php elseif ($question->type == 'paragraph'): ?>
|
||||
<textarea class="form-control" name="responses[<?php echo $question->id; ?>][answered_text]" placeholder="Paragraph text"></textarea>
|
||||
<?php elseif ($question->type == 'dropdown'): ?>
|
||||
<select class="form-control" name="responses[<?php echo $question->id; ?>][answered_text]">
|
||||
<?php foreach ($question->options as $option): ?>
|
||||
<option value="<?php echo $option->option_text; ?>"><?php echo $option->option_text; ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-success" style="display: block; margin: 20px auto 20px 240px; background-color: rgb(103, 58, 183); border-color: rgb(103, 58, 183); color: white;">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Responses List</title>
|
||||
<link rel="stylesheet" href="https://bootswatch.com/3/flatly/bootstrap.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 mt-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<?php if ($this->session->flashdata('status')): ?>
|
||||
<div class="alert alert-success">
|
||||
<?= $this->session->flashdata('status'); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<h3>
|
||||
Responses for "<?php echo $form->title; ?>"
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<table id="basetable1" class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Response ID</th>
|
||||
<th>Username</th>
|
||||
<th>Submitted At</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php foreach ($responses as $response): ?>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="<?php echo base_url('responses/view/' . $response->response_id); ?>">
|
||||
<?php echo $response->response_id; ?>
|
||||
</a>
|
||||
</td>
|
||||
<td><?php echo $response->username; ?></td>
|
||||
<td><?php echo $response->submitted_at; ?></td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,6 +1,22 @@
|
|||
</div>
|
||||
<!-- <script>
|
||||
$(document).ready(function(){
|
||||
$('#basetable1').DataTable({
|
||||
// "pagingType": "full_numbers"
|
||||
});
|
||||
});
|
||||
</script> -->
|
||||
|
||||
<script>
|
||||
CKEDITOR.replace( 'editor1' );
|
||||
$('#basetable1').DataTable({
|
||||
"pagingType": "full_numbers", // Full pagination controls
|
||||
"lengthMenu": [10, 25, 50], // Options for number of rows per page
|
||||
"language": {
|
||||
"search": "Filter records:", // Custom search label
|
||||
"lengthMenu": "Show _MENU_ entries" // Custom length menu label
|
||||
},
|
||||
"columnDefs": [
|
||||
{ "orderable": false, "targets": 2 } // Disable sorting for the "View" column (index 2)
|
||||
],
|
||||
"order": [[1, "desc"]] // Default sort by "Filled At" column (index 1) in descending order
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<?php echo form_open('new_form/create_form'); ?>
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-offset-4">
|
||||
<h1 class="text-center">
|
||||
<?php echo('Form Details'); ?>
|
||||
</h1>
|
||||
<div class="form-group">
|
||||
|
||||
<input type = "text" name ="title" class="form-control" placeholder = "Title" required autofocus>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type = "text" name ="description" class="form-control" placeholder = "Form Description" required autofocus>
|
||||
|
||||
</div>
|
||||
<button type = "submit" class = "btn btn-primary btn-block" >Create</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -1,320 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Google Form Clone</title>
|
||||
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/styles.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
|
||||
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/jquery-ui.css">
|
||||
<style>
|
||||
.navbar-custom {
|
||||
background-color: rgb(103, 58, 183);
|
||||
color: white;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.navbar-custom .navbar-brand {
|
||||
color: white;
|
||||
font-size: 18px; /* Adjust font size for navbar links */
|
||||
}
|
||||
|
||||
.navbar-custom .navbar-nav > li > a {
|
||||
color: white;
|
||||
font-size: 16px; /* Adjust font size for navbar links */
|
||||
}
|
||||
|
||||
/* Additional styling for submit button */
|
||||
#submit-btn {
|
||||
margin-top: 20px;
|
||||
float: left; /* Align button to the left */
|
||||
clear: both; /* Clear float to ensure proper layout */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="navbar navbar-inverse navbar-custom">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-brand" href="<?php echo base_url(); ?>home/index2">Google Forms</a>
|
||||
<a class="navbar-brand" href="<?php echo base_url(); ?>home/index3">Home</a>
|
||||
<a class="navbar-brand" href="<?php echo base_url(); ?>home/index1">About</a>
|
||||
</div>
|
||||
<div id="navbar">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<a class="navbar-brand" href="<?php echo base_url(); ?>users/logout">Logout</a>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container">
|
||||
<div class="form-header">
|
||||
<button id="preview-btn" class="btn btn-info"><i class="fas fa-eye"></i></button>
|
||||
<h2>Untitled Form</h2>
|
||||
<button id="add-section-btn" class="btn btn-primary">+</button>
|
||||
</div>
|
||||
<div id="form-container"></div>
|
||||
|
||||
<!-- Submit button -->
|
||||
<button class="btn btn-success" style="margin-left: 240px; margin-top: 20px">Submit</button>
|
||||
</div>
|
||||
|
||||
<script src="<?php echo base_url('assets/js/jquery.min.js'); ?>"></script>
|
||||
<script src="<?php echo base_url('assets/js/bootstrap.min.js'); ?>"></script>
|
||||
<script src="<?php echo base_url('assets/js/jquery-ui.js'); ?>"></script>
|
||||
<script src="<?php echo base_url('assets/js/scripts.js'); ?>"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
$(document).ready(function() {
|
||||
let index = 1;
|
||||
let activeSection = null;
|
||||
|
||||
// Add option function
|
||||
function addOption(type, container) {
|
||||
let optionIndex = container.children().length + 1;
|
||||
let optionHtml;
|
||||
if (type === 'multiple-choice' || type === 'checkboxes') {
|
||||
optionHtml = `
|
||||
<div class="option">
|
||||
<input type="${type === 'multiple-choice' ? 'radio' : 'checkbox'}" disabled>
|
||||
<input type="text" class="form-control option-label" value="Option ${optionIndex}">
|
||||
<span class="delete-option-icon">×</span>
|
||||
</div>
|
||||
`;
|
||||
} else if (type === 'dropdown') {
|
||||
optionHtml = `
|
||||
<div class="option">
|
||||
<input type="text" class="form-control option-label" value="Option ${optionIndex}">
|
||||
<span class="delete-option-icon">×</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
container.append(optionHtml);
|
||||
}
|
||||
|
||||
// Form section function
|
||||
function createFormSection() {
|
||||
let newSection = `
|
||||
<div class="form-section" data-index="${index}">
|
||||
<div class="header-row">
|
||||
${index === 1 ? '<div class="violet-border"></div>' : ''}
|
||||
<textarea class="form-control untitled-question" placeholder="Untitled Question" rows="1"></textarea>
|
||||
<select class="custom-select">
|
||||
<option value="short-answer">Short Answer</option>
|
||||
<option value="paragraph">Paragraph</option>
|
||||
<option value="multiple-choice">Multiple Choice</option>
|
||||
<option value="checkboxes">Checkboxes</option>
|
||||
<option value="dropdown">Dropdown</option>
|
||||
</select>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" class="required-toggle">
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<span class="delete-section-icon"><i class="fas fa-trash-alt"></i></span>
|
||||
</div>
|
||||
<div class="options-container"></div>
|
||||
</div>
|
||||
`;
|
||||
$('#form-container').append(newSection);
|
||||
index++;
|
||||
|
||||
positionAddSectionButton();
|
||||
}
|
||||
|
||||
function positionAddSectionButton() {
|
||||
if (activeSection) {
|
||||
let position = activeSection.position();
|
||||
let buttonWidth = $('#add-section-btn').outerWidth();
|
||||
let buttonHeight = $('#add-section-btn').outerHeight();
|
||||
|
||||
$('#add-section-btn').css({
|
||||
position: 'absolute',
|
||||
left: position.left - buttonWidth - 47 + 'px',
|
||||
top: position.top + activeSection.height() / 2 - buttonHeight / 2 + 'px'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Event handler is triggered
|
||||
// creates a new form section;sets it as active;repositions the add section button
|
||||
$('#add-section-btn').on('click', function() {
|
||||
createFormSection();
|
||||
$('.form-section').removeClass('active');
|
||||
activeSection = $('.form-section').last();
|
||||
activeSection.addClass('active');
|
||||
positionAddSectionButton();
|
||||
});
|
||||
|
||||
// It updates the options container based on the selected type, adding the necessary input fields or buttons.
|
||||
$(document).on('change', '.custom-select', function() {
|
||||
let type = $(this).val();
|
||||
let container = $(this).closest('.form-section').find('.options-container');
|
||||
container.empty();
|
||||
|
||||
$(this).closest('.form-section').find('.add-option-btn').remove();
|
||||
|
||||
if (type === 'short-answer') {
|
||||
container.append('<input type="text" class="form-control" disabled placeholder="Short answer text">');
|
||||
} else if (type === 'paragraph') {
|
||||
container.append('<textarea class="form-control" disabled placeholder="Paragraph text"></textarea>');
|
||||
} else {
|
||||
addOption(type, container);
|
||||
$(this).closest('.form-section').append('<button class="btn btn-secondary add-option-btn">Add Option</button>');
|
||||
}
|
||||
});
|
||||
|
||||
// add option event handler
|
||||
// adds a new option to the options container and updates the option numbers
|
||||
$(document).on('click', '.add-option-btn', function() {
|
||||
let type = $(this).closest('.form-section').find('.custom-select').val();
|
||||
let container = $(this).closest('.form-section').find('.options-container');
|
||||
addOption(type, container);
|
||||
// refreshOptionNumbers(container);
|
||||
});
|
||||
|
||||
// removes the section;updates the active section;repositions add section button
|
||||
$(document).on('click', '.delete-section-icon', function() {
|
||||
let section = $(this).closest('.form-section');
|
||||
let prevSection = section.prev('.form-section');
|
||||
let nextSection = section.next('.form-section');
|
||||
section.remove();
|
||||
if (section.hasClass('active')) {
|
||||
activeSection = null;
|
||||
}
|
||||
if (prevSection.length > 0) {
|
||||
prevSection.find('.delete-section-icon').appendTo(prevSection.find('.form-section'));
|
||||
activeSection = prevSection;
|
||||
} else if (nextSection.length > 0) {
|
||||
nextSection.find('.delete-section-icon').appendTo(nextSection.find('.form-header'));
|
||||
activeSection = nextSection;
|
||||
}
|
||||
|
||||
positionAddSectionButton();
|
||||
});
|
||||
|
||||
// delete option
|
||||
$(document).on('click', '.delete-option-icon', function() {
|
||||
let option = $(this).closest('.option');
|
||||
let container = option.closest('.options-container');
|
||||
option.remove();
|
||||
K });
|
||||
|
||||
// Event handler for required toggle button
|
||||
$(document).on('click', '.required-toggle', function() {
|
||||
$(this).closest('.form-section').toggleClass('required');
|
||||
});
|
||||
|
||||
// Preview button functionality
|
||||
$('#preview-btn').on('click', function() {
|
||||
let previewWindow = window.open('', '_blank');
|
||||
let previewContent = `
|
||||
<html>
|
||||
<head>
|
||||
<title>Form Preview</title>
|
||||
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
|
||||
<style>
|
||||
body { background-color: rgb(240, 235, 248); }
|
||||
.container { margin-top: 30px; }
|
||||
.form-section {background-color: white;width: 56%;margin-bottom: 30px;margin-left: 240px;padding: 20px;position: relative;align-items: center;border-radius: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
|
||||
.form-header {background-color: white;padding: 20px;margin-bottom: 10px;margin-left: 240px;border-radius: 10px 10px 0 0;display: flex;justify-content: space-between;align-items: center; position: relative;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);border-top: 10px solid rgb(103, 58, 183);width: 56%; }
|
||||
.form-section h2 { text-align: center; margin-bottom: 30px; }
|
||||
.form-section .question-section { margin-bottom: 20px; } /* Add margin-bottom to the question section */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="form-header">
|
||||
<h2>Untitled Form</h2>
|
||||
</div>
|
||||
`;
|
||||
$('.form-section').each(function() {
|
||||
previewContent += '<div class="form-section">';
|
||||
previewContent += '<div class="question-section">';
|
||||
previewContent += '<textarea class="form-control question-label" disabled>' + $(this).find('.untitled-question').val() + '</textarea>';
|
||||
previewContent += '</div>';
|
||||
let type = $(this).find('.custom-select').val();
|
||||
let optionsContainer = $(this).find('.options-container');
|
||||
|
||||
if (type === 'multiple-choice') {
|
||||
optionsContainer.find('.option').each(function() {
|
||||
previewContent += `
|
||||
<div class="option">
|
||||
<input type="radio" name="option-${index}">
|
||||
<label>${$(this).find('.option-label').val()}</label>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
} else if (type === 'checkboxes') {
|
||||
optionsContainer.find('.option').each(function() {
|
||||
previewContent += `
|
||||
<div class="option">
|
||||
<input type="checkbox">
|
||||
<label>${$(this).find('.option-label').val()}</label>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
} else if (type === 'short-answer') {
|
||||
previewContent += '<input type="text" class="form-control" placeholder="Short answer text">';
|
||||
} else if (type === 'paragraph') {
|
||||
previewContent += '<textarea class="form-control" placeholder="Paragraph text"></textarea>';
|
||||
} else if (type === 'dropdown') {
|
||||
let dropdownHtml = '<select class="form-control">';
|
||||
optionsContainer.find('.option .option-label').each(function() {
|
||||
dropdownHtml += `<option>${$(this).val()}</option>`;
|
||||
});
|
||||
dropdownHtml += '</select>';
|
||||
previewContent += dropdownHtml;
|
||||
}
|
||||
previewContent += '</div>';
|
||||
});
|
||||
previewContent += `
|
||||
<button class="btn btn-success" style="margin-left: 240px; margin-top: 20px">Submit</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
previewWindow.document.write(previewContent);
|
||||
previewWindow.document.close();
|
||||
});
|
||||
|
||||
// Activate the section;repositions add section button
|
||||
$(document).on('click', '.form-section', function() {
|
||||
$('.form-section').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
activeSection = $(this);
|
||||
positionAddSectionButton();
|
||||
});
|
||||
|
||||
$('#form-container').sortable({
|
||||
placeholder: 'ui-state-highlight',
|
||||
start: function (event, ui) {
|
||||
ui.placeholder.height(ui.item.height());
|
||||
},
|
||||
stop: function (event, ui) {
|
||||
positionAddSectionButton();
|
||||
}
|
||||
});
|
||||
|
||||
$('#form-container').disableSelection();
|
||||
});
|
||||
i have shared with you my html file as well as the js file,
|
||||
i want you to update the js file in such a way that once i click the submit button in the forms ui section i want them to get updated in the database through post data.
|
||||
each of the question text or the options i create and the type of question such as dropdown or checkbox,try to enclose every data under an active form ,in a similar way as you fetched all the information to show in the preview window.
|
||||
|
||||
for each of the question text in each div created , i want to save in the text colomn in the questions table and for the type of question that is dropdown or multiple choice or checkbox etc i want to save them as 1,2,3,4 or 5 in the type colomn in the questions table and if the required button is selected it should reflect in the required colomn in the table as 0 or 1, for the options created in each of the div tag or the question tag should be saved in the text colomn in the options table.
|
||||
so that i can retreive the data when required.
|
||||
i want you also to create all the controllers and the models and the view required to perform the above task,i have created a login page after authorization the user is able to create the form
|
||||
so with respect to that particular users id , all the above contents should be updated in the database
|
||||
i will explain you the structure of my database
|
||||
have also created a database in the phpmyadmin as google_forms wherein i currently have 4 tables as users,forms,questions,options
|
||||
in the users table id,username,email,password,created_at where id isthe primary key .
|
||||
The forms table has id,user_id as the foreign key which is refernced to the id from users table,created_at and description colomn.
|
||||
questions table has id as the primary key,form_id as the foreign key which is referenced to the id from the forms table ,text,type,required ,created_at.
|
||||
and the options table has id as the primary key ,question_id as the foreign key which is referenced to the id from the questions table.
|
||||
finally i want a updation in my js file and html file as suggested
|
||||
and i want all the controller and models to perform this task in the codeigniter
|
||||
|
|
@ -1,458 +0,0 @@
|
|||
To achieve the functionality where the form data is submitted and stored in the database using CodeIgniter, we need to set up the necessary controllers, models, and views. Below is a detailed guide on how to implement this.
|
||||
|
||||
### Step 1: Update JavaScript (scripts.js)
|
||||
|
||||
The JavaScript file will handle form interactions and prepare data for submission to the server.
|
||||
|
||||
```javascript
|
||||
$(document).ready(function() {
|
||||
let index = 1;
|
||||
let activeSection = null;
|
||||
|
||||
// Function to add an option based on type
|
||||
function addOption(type, container) {
|
||||
let optionIndex = container.children().length + 1;
|
||||
let optionHtml;
|
||||
if (type === 'multiple-choice' || type === 'checkboxes') {
|
||||
optionHtml = `
|
||||
<div class="option">
|
||||
<input type="${type === 'multiple-choice' ? 'radio' : 'checkbox'}" disabled>
|
||||
<input type="text" class="form-control option-label" value="Option ${optionIndex}">
|
||||
<span class="delete-option-icon">×</span>
|
||||
</div>
|
||||
`;
|
||||
} else if (type === 'dropdown') {
|
||||
optionHtml = `
|
||||
<div class="option">
|
||||
<input type="text" class="form-control option-label" value="Option ${optionIndex}">
|
||||
<span class="delete-option-icon">×</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
container.append(optionHtml);
|
||||
}
|
||||
|
||||
// Function to create a new form section
|
||||
function createFormSection() {
|
||||
let newSection = `
|
||||
<div class="form-section" data-index="${index}">
|
||||
<div class="header-row">
|
||||
${index === 1 ? '<div class="violet-border"></div>' : ''}
|
||||
<textarea class="form-control untitled-question" placeholder="Untitled Question" rows="1"></textarea>
|
||||
<select class="custom-select">
|
||||
<option value="short-answer">Short Answer</option>
|
||||
<option value="paragraph">Paragraph</option>
|
||||
<option value="multiple-choice">Multiple Choice</option>
|
||||
<option value="checkboxes">Checkboxes</option>
|
||||
<option value="dropdown">Dropdown</option>
|
||||
</select>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" class="required-toggle">
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<span class="delete-section-icon"><i class="fas fa-trash-alt"></i></span>
|
||||
</div>
|
||||
<div class="options-container"></div>
|
||||
</div>
|
||||
`;
|
||||
$('#form-container').append(newSection);
|
||||
index++;
|
||||
positionAddSectionButton();
|
||||
}
|
||||
|
||||
// Position the "Add Section" button dynamically
|
||||
function positionAddSectionButton() {
|
||||
if (activeSection) {
|
||||
let position = activeSection.position();
|
||||
let buttonWidth = $('#add-section-btn').outerWidth();
|
||||
let buttonHeight = $('#add-section-btn').outerHeight();
|
||||
|
||||
$('#add-section-btn').css({
|
||||
position: 'absolute',
|
||||
left: position.left - buttonWidth - 47 + 'px',
|
||||
top: position.top + activeSection.height() / 2 - buttonHeight / 2 + 'px'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Event listener for "Add Section" button
|
||||
$('#add-section-btn').on('click', function() {
|
||||
createFormSection();
|
||||
$('.form-section').removeClass('active');
|
||||
activeSection = $('.form-section').last();
|
||||
activeSection.addClass('active');
|
||||
positionAddSectionButton();
|
||||
});
|
||||
|
||||
// Event listener for changing question type
|
||||
$(document).on('change', '.custom-select', function() {
|
||||
let type = $(this).val();
|
||||
let container = $(this).closest('.form-section').find('.options-container');
|
||||
container.empty();
|
||||
|
||||
$(this).closest('.form-section').find('.add-option-btn').remove();
|
||||
|
||||
if (type === 'short-answer') {
|
||||
container.append('<input type="text" class="form-control" disabled placeholder="Short answer text">');
|
||||
} else if (type === 'paragraph') {
|
||||
container.append('<textarea class="form-control" disabled placeholder="Paragraph text"></textarea>');
|
||||
} else {
|
||||
addOption(type, container);
|
||||
$(this).closest('.form-section').append('<button class="btn btn-secondary add-option-btn">Add Option</button>');
|
||||
}
|
||||
});
|
||||
|
||||
// Event listener for adding an option
|
||||
$(document).on('click', '.add-option-btn', function() {
|
||||
let type = $(this).closest('.form-section').find('.custom-select').val();
|
||||
let container = $(this).closest('.form-section').find('.options-container');
|
||||
addOption(type, container);
|
||||
});
|
||||
|
||||
// Event listener for deleting a section
|
||||
$(document).on('click', '.delete-section-icon', function() {
|
||||
let section = $(this).closest('.form-section');
|
||||
let prevSection = section.prev('.form-section');
|
||||
let nextSection = section.next('.form-section');
|
||||
section.remove();
|
||||
if (section.hasClass('active')) {
|
||||
activeSection = null;
|
||||
}
|
||||
if (prevSection.length > 0) {
|
||||
prevSection.find('.delete-section-icon').appendTo(prevSection.find('.form-section'));
|
||||
activeSection = prevSection;
|
||||
} else if (nextSection.length > 0) {
|
||||
nextSection.find('.delete-section-icon').appendTo(nextSection.find('.form-header'));
|
||||
activeSection = nextSection;
|
||||
}
|
||||
positionAddSectionButton();
|
||||
});
|
||||
|
||||
// Event listener for deleting an option
|
||||
$(document).on('click', '.delete-option-icon', function() {
|
||||
$(this).closest('.option').remove();
|
||||
});
|
||||
|
||||
// Event listener for required toggle button
|
||||
$(document).on('click', '.required-toggle', function() {
|
||||
$(this).closest('.form-section').toggleClass('required');
|
||||
});
|
||||
|
||||
// Event listener for preview button
|
||||
$('#preview-btn').on('click', function() {
|
||||
let previewWindow = window.open('', '_blank');
|
||||
let previewContent = `
|
||||
<html>
|
||||
<head>
|
||||
<title>Form Preview</title>
|
||||
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
|
||||
<style>
|
||||
body { background-color: rgb(240, 235, 248); }
|
||||
.container { margin-top: 30px; }
|
||||
.form-section {background-color: white;width: 56%;margin-bottom: 30px;margin-left: 240px;padding: 20px;position: relative;align-items: center;border-radius: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
|
||||
.form-header {background-color: white;padding: 20px;margin-bottom: 10px;margin-left: 240px;border-radius: 10px 10px 0 0;display: flex;justify-content: space-between;align-items: center; position: relative;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);border-top: 10px solid rgb(103, 58, 183);width: 56%; }
|
||||
.form-section h2 { text-align: center; margin-bottom: 30px; }
|
||||
.form-section .question-section { margin-bottom: 20px; } /* Add margin-bottom to the question section */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="form-header">
|
||||
<h2>Untitled Form</h2>
|
||||
</div>
|
||||
`;
|
||||
$('.form-section').each(function() {
|
||||
previewContent += '<div class="form-section">';
|
||||
previewContent += '<div class="question-section">';
|
||||
previewContent += '<textarea class="form-control question-label" disabled>' + $(this).find('.untitled-question').val() + '</textarea>';
|
||||
previewContent += '</div>';
|
||||
let type = $(this).find('.custom-select').val();
|
||||
let optionsContainer = $(this).find('.options-container');
|
||||
|
||||
if (type === 'multiple-choice') {
|
||||
optionsContainer.find('.option').each(function() {
|
||||
previewContent += `
|
||||
<div class="option">
|
||||
<input type="radio" name="option-${index}">
|
||||
<label>${$(this).find('.option-label').val()}</label>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
} else if (type === 'checkboxes') {
|
||||
optionsContainer.find('.option').each(function() {
|
||||
previewContent += `
|
||||
<div class="option">
|
||||
<input type="checkbox">
|
||||
<label>${$(this).find('.option-label').val()}</label>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
} else if (type === 'short-answer') {
|
||||
previewContent += '<input type="text" class="form-control" placeholder="Short answer text">';
|
||||
} else if (type === 'paragraph') {
|
||||
previewContent += '<textarea class="form-control" placeholder="Paragraph text"></textarea>';
|
||||
} else if (type === 'dropdown') {
|
||||
let dropdownHtml = '<select class="form-control">';
|
||||
optionsContainer.find('.option .option-label').each(function() {
|
||||
dropdownHtml += `<option>${$(this).val()}</option>`;
|
||||
});
|
||||
dropdownHtml += '</select>';
|
||||
previewContent += dropdownHtml;
|
||||
}
|
||||
previewContent += '</div>';
|
||||
});
|
||||
previewContent += `
|
||||
<button id="submit-btn" class="btn btn-success" style="margin-left: 240px; margin-top: 20px">Submit</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
previewWindow.document.write(previewContent);
|
||||
previewWindow.document.close();
|
||||
});
|
||||
|
||||
// Event listener for clicking on a form section
|
||||
|
||||
|
||||
$(document).on('click', '.form-section', function() {
|
||||
$('.form-section').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
activeSection = $(this);
|
||||
positionAddSectionButton();
|
||||
});
|
||||
|
||||
// Submit button click event to save data to the database
|
||||
$(document).on('click', '#submit-btn', function() {
|
||||
let formData = [];
|
||||
|
||||
// Iterate through each form section
|
||||
$('.form-section').each(function() {
|
||||
let sectionData = {
|
||||
question: $(this).find('.untitled-question').val(),
|
||||
type: $(this).find('.custom-select').val(),
|
||||
required: $(this).find('.required-toggle').prop('checked') ? 1 : 0,
|
||||
options: []
|
||||
};
|
||||
|
||||
// Iterate through options if any
|
||||
$(this).find('.option').each(function() {
|
||||
sectionData.options.push($(this).find('.option-label').val());
|
||||
});
|
||||
|
||||
formData.push(sectionData);
|
||||
});
|
||||
|
||||
// Ajax call to submit data
|
||||
$.ajax({
|
||||
url: "<?php echo base_url('form/submit_form_data'); ?>",
|
||||
type: "POST",
|
||||
data: {
|
||||
formData: formData
|
||||
},
|
||||
success: function(response) {
|
||||
alert(response); // Handle response from server
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Initialize sortable feature for form sections
|
||||
$('#form-container').sortable({
|
||||
placeholder: 'ui-state-highlight',
|
||||
start: function (event, ui) {
|
||||
ui.placeholder.height(ui.item.height());
|
||||
},
|
||||
stop: function (event, ui) {
|
||||
positionAddSectionButton();
|
||||
}
|
||||
});
|
||||
|
||||
$('#form-container').disableSelection();
|
||||
});
|
||||
```
|
||||
|
||||
### Step 2: Create Controllers and Models in CodeIgniter
|
||||
|
||||
#### 1. Controller: Form.php
|
||||
|
||||
```php
|
||||
<?php
|
||||
defined('BASEPATH') OR exit('No direct script access allowed');
|
||||
|
||||
class Form extends CI_Controller {
|
||||
|
||||
public function __construct() {
|
||||
parent::__construct();
|
||||
$this->load->model('Form_model');
|
||||
}
|
||||
|
||||
public function index() {
|
||||
// Load view for form creation
|
||||
$this->load->view('create_form');
|
||||
}
|
||||
|
||||
public function submit_form_data() {
|
||||
$formData = $this->input->post('formData');
|
||||
|
||||
// Example to get user ID (you should have this implemented in your authentication flow)
|
||||
$userId = 1; // Replace with your actual user ID retrieval logic
|
||||
|
||||
// Insert form data into database using model
|
||||
foreach ($formData as $section) {
|
||||
$formId = $this->Form_model->insert_form($userId, $section['question']);
|
||||
|
||||
// Insert questions into database
|
||||
$this->Form_model->insert_question($formId, $section['type'], $section['required']);
|
||||
|
||||
// Insert options into database if any
|
||||
if (!empty($section['options'])) {
|
||||
foreach ($section['options'] as $option) {
|
||||
$this->Form_model->insert_option($formId, $option);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
echo "Form data submitted successfully!";
|
||||
}
|
||||
}
|
||||
?>
|
||||
```
|
||||
|
||||
#### 2. Model: Form_model.php
|
||||
|
||||
```php
|
||||
<?php
|
||||
defined('BASEPATH') OR exit('No direct script access allowed');
|
||||
|
||||
class Form_model extends CI_Model {
|
||||
|
||||
public function insert_form($userId, $description) {
|
||||
// Insert form data and return form ID
|
||||
$data = array(
|
||||
'user_id' => $userId,
|
||||
'description' => $description,
|
||||
'created_at' => date('Y-m-d H:i:s')
|
||||
);
|
||||
$this->db->insert('forms', $data);
|
||||
return $this->db->insert_id();
|
||||
}
|
||||
|
||||
public function insert_question($formId, $type, $required) {
|
||||
// Insert question data
|
||||
$data = array(
|
||||
'form_id' => $formId,
|
||||
'type' => $type,
|
||||
'required' => $required,
|
||||
'created_at' => date('Y-m-d H:i:s')
|
||||
);
|
||||
$this->db->insert('questions', $data);
|
||||
}
|
||||
|
||||
public function insert_option($formId, $text) {
|
||||
// Insert option data
|
||||
$data = array(
|
||||
'question_id' => $formId, // Assuming form ID here, adjust as per your structure
|
||||
'text' => $text
|
||||
);
|
||||
$this->db->insert('options', $data);
|
||||
}
|
||||
|
||||
}
|
||||
?>
|
||||
```
|
||||
|
||||
### Step 3: Create Views
|
||||
|
||||
#### 1. create_form.php (View for form creation)
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Google Form Clone</title>
|
||||
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/styles.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
|
||||
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/jquery-ui.css">
|
||||
<style>
|
||||
.navbar-custom {
|
||||
background-color: rgb(103, 58, 183);
|
||||
color: white;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.navbar-custom .navbar-brand {
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.navbar-custom .navbar-nav > li > a {
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#submit-btn {
|
||||
margin-top: 20px;
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navigation Bar -->
|
||||
<nav class="navbar navbar-inverse navbar-custom">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-brand" href="<?php echo base_url(); ?>home/index2">Google Forms</a>
|
||||
<a class="navbar-brand" href="<?php echo base_url(); ?>home/index3">Home</a>
|
||||
<a class="navbar-brand" href="<?php echo base_url(); ?>home/index1">About</a>
|
||||
</div>
|
||||
<div id="navbar">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<a class="navbar-brand" href="<?php echo base_url(); ?>users/logout">Logout</a>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Form Creation Section -->
|
||||
<div class="container">
|
||||
<div class="form-header">
|
||||
<button id="preview-btn" class="btn btn-info"><i class="fas fa-eye"></i></button>
|
||||
<h2>Untitled Form</h2>
|
||||
<button id="add-section-btn" class="btn btn-primary">+</button>
|
||||
</div>
|
||||
<div id="form-container"></div>
|
||||
<button id="submit-btn" class="btn btn-success" style="margin-left: 240px; margin-top: 20px">Submit</button>
|
||||
</div>
|
||||
|
||||
<!-- JavaScript files -->
|
||||
<script src="<?php echo base_url('assets/js/jquery.min.js'); ?>"></script>
|
||||
<script src="<?php echo base_url('assets/js/bootstrap.min.js'); ?>"></script>
|
||||
<script src="<?php echo base_url('assets/js/jquery-ui.js'); ?>"></script>
|
||||
<script src="<?php echo base_url('assets/js/scripts.js'); ?>"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Step 4: Database Structure
|
||||
|
||||
Ensure your database tables (`users`, `forms`, `questions`, `options`) are set up according to your described structure:
|
||||
|
||||
- `users` table: id (primary key), username, email, password, created_at
|
||||
- `forms` table: id (primary key), user_id (foreign key to users.id), description, created_at
|
||||
- `questions` table: id (primary key), form_id (foreign key to forms.id), text, type, required, created_at
|
||||
- `options` table: id (primary key), question_id (foreign key to questions.id), text
|
||||
|
||||
### Step 5: Configure CodeIgniter
|
||||
|
||||
Ensure your CodeIgniter configuration (`config/config.php` and `config/database.php`) is set up correctly with base URL, database connection settings, and any other necessary configurations.
|
||||
|
||||
### Step 6: Testing
|
||||
|
||||
- Access the form creation page (`http://yourdomain.com/form`) and create a form.
|
||||
- Click on the "Submit" button to save the form data.
|
||||
- Verify that the data is correctly saved in your database tables.
|
||||
|
||||
This setup assumes you have basic knowledge of CodeIgniter and have configured your environment correctly. Adjust paths (`base_url()`) and database configurations as per your setup.
|
||||
|
|
@ -18,30 +18,35 @@
|
|||
|
||||
.navbar-custom .navbar-brand {
|
||||
color: white;
|
||||
font-size: 18px; /* Adjust font size for navbar links */
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.navbar-custom .navbar-nav>li>a {
|
||||
color: white;
|
||||
font-size: 16px; /* Adjust font size for navbar links */
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Additional styling for submit button */
|
||||
#submit-btn {
|
||||
margin-top: 20px;
|
||||
float: left; /* Align button to the left */
|
||||
clear: both; /* Clear float to ensure proper layout */
|
||||
background-color: rgb(103, 58, 183); border-color: rgb(103, 58, 183); color: white;"
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
.container{
|
||||
margin-top: 10px;
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
var base_url = '<?php echo base_url(); ?>';
|
||||
</script>
|
||||
<nav class="navbar navbar-inverse navbar-custom">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-brand" href="<?php echo base_url(); ?>home/index2">Google Forms</a>
|
||||
<a class="navbar-brand" href="<?php echo base_url(); ?>home/index3">Home</a>
|
||||
<a class="navbar-brand" href="<?php echo base_url(); ?>home/index1">About</a>
|
||||
<a class="navbar-brand" href="<?php echo base_url(); ?>">Google Forms</a>
|
||||
</div>
|
||||
<div id="navbar">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
|
|
@ -54,19 +59,22 @@
|
|||
<div class="container">
|
||||
<div class="form-header">
|
||||
<button id="preview-btn" class="btn btn-info"><i class="fas fa-eye"></i></button>
|
||||
<h2>Untitled Form</h2>
|
||||
<h2><?php echo htmlspecialchars($title); ?></h2>
|
||||
<!-- <h2>Untitled Form</h2> -->
|
||||
|
||||
<button id="add-section-btn" class="btn btn-primary">+</button>
|
||||
</div>
|
||||
<div id="form-container"></div>
|
||||
|
||||
<!-- Submit button -->
|
||||
<button class="btn btn-success" style="margin-left: 240px; margin-top: 20px">Submit</button>
|
||||
<button id="submit-btn" class="btn btn-success" style="margin-left: 240px; margin-top: 20px">Submit</button>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="<?php echo base_url('assets/js/jquery.min.js'); ?>"></script>
|
||||
<script src="<?php echo base_url('assets/js/bootstrap.min.js'); ?>"></script>
|
||||
<script src="<?php echo base_url('assets/js/jquery-ui.js'); ?>"></script>
|
||||
<script src="<?php echo base_url('assets/js/scripts.js'); ?>"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,27 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Blog App</title>
|
||||
<title>Form Preview - Google Forms</title>
|
||||
<link rel="stylesheet" href="https://bootswatch.com/3/flatly/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/styles.css">
|
||||
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/header_styles.css">
|
||||
<script src="https://cdn.ckeditor.com/4.16.0/standard/ckeditor.js"></script>
|
||||
</head>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
|
||||
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/jquery-ui.css">
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
|
||||
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<body style = "background-color: rgb(240,235,248);" >
|
||||
<nav class="navbar navbar-inverse" style="background-color: rgb(103, 58, 183);">
|
||||
<div class="container" style="background-color: rgb(103, 58, 183);">
|
||||
<?php if ($this->session->userdata('logged_in')): ?>
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-brand" href="<?php echo base_url(); ?>home/index2">Google Forms</a>
|
||||
<a class="navbar-brand" href="<?php echo base_url(); ?>">Google Forms</a>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div id="navbar">
|
||||
<ul class="nav navbar-nav">
|
||||
<li><a href="<?php echo base_url(); ?>home/index3">Home</a></li>
|
||||
<li><a href="<?php echo base_url(); ?>home/index1">About</a></li>
|
||||
<?php if ($this->session->userdata('logged_in')): ?>
|
||||
<li><a href="<?php echo base_url(); ?>published_forms">Published Forms</a></li>
|
||||
<li><a href="<?php echo base_url(); ?>drafts">Drafts</a></li>
|
||||
|
||||
<?php endif; ?>
|
||||
</ul>
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<?php if (!$this->session->userdata('logged_in')): ?>
|
||||
|
|
@ -29,21 +39,19 @@
|
|||
<li><a href="<?php echo base_url(); ?>users/register">Register</a></li>
|
||||
<?php endif; ?>
|
||||
<?php if ($this->session->userdata('logged_in')): ?>
|
||||
<li><a href="<?php echo base_url(); ?>home/create_form">Create Form</a></li>
|
||||
<li><a href="<?php echo base_url(); ?>title">Create Form</a></li>
|
||||
<li><a href="<?php echo base_url(); ?>users/logout">Logout</a></li>
|
||||
|
||||
<?php endif; ?>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container">
|
||||
<?php if ($this->session->flashdata('user_registered')): ?>
|
||||
<?php echo '<p class="alert alert-success">' . $this->session->flashdata('user_registered') . '</p>'; ?>
|
||||
<?php endif; ?>
|
||||
|
||||
|
||||
<?php if ($this->session->flashdata('login_failed')): ?>
|
||||
<?php echo '<p class="alert alert-danger">' . $this->session->flashdata('login_failed') . '</p>'; ?>
|
||||
<?php endif; ?>
|
||||
|
|
@ -55,8 +63,4 @@
|
|||
<?php if ($this->session->flashdata('user_loggedout')): ?>
|
||||
<?php echo '<p class="alert alert-success">' . $this->session->flashdata('user_loggedout') . '</p>'; ?>
|
||||
<?php endif; ?>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<?php echo form_open('users/login'); ?>
|
||||
<?php echo form_open('users/login/'.$form_id); ?>
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-offset-4">
|
||||
<h1 class="text-center">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,68 @@
|
|||
body {
|
||||
background-color: rgb(240, 235, 248);
|
||||
}
|
||||
.container {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.form-header {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
margin-left: 240px;
|
||||
border-radius: 10px 10px 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
border-top: 10px solid rgb(103, 58, 183);
|
||||
width: 56%;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.form-header h2, .form-header h4 {
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
}
|
||||
.form-header h4 {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.form-section {
|
||||
background-color: white;
|
||||
margin-bottom: 30px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
padding: 20px;
|
||||
}
|
||||
.question-section {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.question-label {
|
||||
font-weight: bold;
|
||||
}
|
||||
.options-container {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.option {
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.option input[type="checkbox"] {
|
||||
margin-right: 10px;
|
||||
width: 16px; /* Adjust size of checkbox */
|
||||
height: 16px; /* Adjust size of checkbox */
|
||||
}
|
||||
.option input[type="radio"] {
|
||||
margin-right: 10px;
|
||||
width: 16px; /* Adjust size of radio button */
|
||||
height: 16px; /* Adjust size of radio button */
|
||||
}
|
||||
.option label {
|
||||
margin: 0;
|
||||
}
|
||||
.btn-success {
|
||||
margin-top: 20px;
|
||||
position: relative;
|
||||
left: 240px;
|
||||
background-color: rgb(103, 58, 183);
|
||||
border-color: rgb(103, 58, 183);
|
||||
color: white;
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
/* Navbar styles */
|
||||
.navbar-custom {
|
||||
background-color: rgb(103, 58, 183); ; /* Customize this color */
|
||||
}
|
||||
|
||||
/* Button positioning for section addition */
|
||||
#add-section-btn {
|
||||
position: absolute;
|
||||
/* Ensure proper positioning */
|
||||
}
|
||||
|
||||
.form-section {
|
||||
margin-bottom: 15px;
|
||||
padding: 15px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.header-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-row textarea,
|
||||
.header-row select {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.navbar-custom .navbar-brand {
|
||||
color: #fff; /* Customize brand color */
|
||||
}
|
||||
|
||||
.navbar-custom .navbar-nav li a {
|
||||
color: #fff; /* Customize link color */
|
||||
}
|
||||
|
||||
|
|
@ -1,4 +1,81 @@
|
|||
body {
|
||||
background-color: rgb(240, 235, 248);
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
background-color: white;
|
||||
width: 56%;
|
||||
margin-bottom: 30px;
|
||||
margin-left: 240px;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.form-header {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
margin-bottom: 10px;
|
||||
margin-left: 240px;
|
||||
border-radius: 10px 10px 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: left;
|
||||
position: relative;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
border-top: 10px solid rgb(103, 58, 183);
|
||||
width: 56%;
|
||||
}
|
||||
|
||||
.form-section h2 {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.form-section .question-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
/* Navbar custom styles */
|
||||
.navbar-custom {
|
||||
background-color: rgb(103, 58, 183);
|
||||
color: white;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.navbar-custom .navbar-brand,
|
||||
.navbar-custom .navbar-nav>li>a {
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar-custom .navbar-brand:hover,
|
||||
.navbar-custom .navbar-nav>li>a:hover {
|
||||
color: white; /* Keep text color white on hover */
|
||||
text-decoration: none; /* Remove underline if present */
|
||||
}
|
||||
|
||||
|
||||
.navbar-nav>li>a {
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar-nav>li>a:hover {
|
||||
color: white; /* Explicitly set text color on hover */
|
||||
}
|
||||
|
||||
#submit-btn {
|
||||
margin-top: 20px;
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
.post-date{
|
||||
background: #f4f4f4;
|
||||
padding: 4px;
|
||||
|
|
@ -28,3 +105,12 @@ a.pagination-link{
|
|||
.cat-delete{
|
||||
display:inline;
|
||||
}
|
||||
#basetable1 {
|
||||
border: 1px solid #3333336c; /* Darker border color */
|
||||
}
|
||||
|
||||
#basetable1 th, #basetable1 td {
|
||||
border: 1px solid #3333336c; /* Darker border color for table cells */
|
||||
}
|
||||
/* Custom DataTables pagination styles */
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
|
||||
.form-header {
|
||||
margin-bottom: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
.form-description, .submitted-at, .user-email {
|
||||
color: rgba(0, 0, 0, 0.5); /* Transparent text */
|
||||
margin-bottom: 10px;
|
||||
text-align: left; /* Align text left */
|
||||
display: block; /* Ensure each element is a block element */
|
||||
width: 100%; /* Ensure each element takes the full width of the container */
|
||||
padding-left: 0; /* Ensure no padding is affecting alignment */
|
||||
}
|
||||
|
||||
.form-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.question-section {
|
||||
border: 1px solid #ddd;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
background-color: #f9f9f9;
|
||||
text-align: left;
|
||||
}
|
||||
.container {
|
||||
width: 65%; /* Or any specific width */
|
||||
/* text-align: left; Ensure the container itself is aligned left */
|
||||
padding: 0; /* Ensure no padding is affecting alignment */
|
||||
margin: 0 auto; /* Center the container if needed */
|
||||
}
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
body { background-color: rgb(240, 235, 248); }
|
||||
.container { margin-top: 30px; }
|
||||
.form-header {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
margin-left: 240px;
|
||||
border-radius: 10px 10px 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
border-top: 10px solid rgb(103, 58, 183);
|
||||
width: 56%;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.form-header h2 { margin: 0; }
|
||||
.form-header h4 { color: rgba(0, 0, 0, 0.5); }
|
||||
.form-section {
|
||||
background-color: white;
|
||||
width: 56%;
|
||||
margin-left: 240px;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.question-container {
|
||||
border: 1px solid #ddd;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
background-color: #f9f9f9;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.option {
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.option input[type="radio"],
|
||||
.option input[type="checkbox"] {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.required-field::after {
|
||||
content: '*';
|
||||
color: red;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.form-section {
|
||||
background-color: white;
|
||||
margin-bottom: 30px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
padding: 20px;
|
||||
}
|
||||
.question-container {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
|
@ -3,11 +3,35 @@ body {
|
|||
background-color: rgb(240, 235, 248);
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
.form-section h2 {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.form-section .question-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
/* Navbar custom styles */
|
||||
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.form_container_top{
|
||||
box-sizing: border-box;
|
||||
margin-top: 10px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
line-height: 100%;
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
border-bottom: 1px solid #f4f4f9;
|
||||
color: black;
|
||||
height: 20px;
|
||||
}
|
||||
/* Form header styles */
|
||||
.form-header {
|
||||
background-color: white;
|
||||
|
|
@ -137,8 +161,8 @@ body {
|
|||
|
||||
|
||||
.add-option-btn {
|
||||
background-color: #f0f0f0;
|
||||
color: #333;
|
||||
background-color: rgb(66, 133, 244);
|
||||
/* color: rgb(66, 133, 244); */
|
||||
margin-top: 11px;
|
||||
font-size: 0.9em;
|
||||
|
||||
|
|
@ -200,3 +224,35 @@ input:checked + .slider {
|
|||
input:checked + .slider:before {
|
||||
transform: translateX(14px);
|
||||
}
|
||||
.body_header_bg{
|
||||
background-color: rgb(240,235,248);
|
||||
}
|
||||
table a:not(.btn) {
|
||||
color: blue !important;
|
||||
}
|
||||
|
||||
table a:not(.btn):hover {
|
||||
color: darkblue !important;
|
||||
}
|
||||
/* .btn-success {
|
||||
color: #ffffff;
|
||||
background-color: rgb(103, 58, 183);
|
||||
border-color: rgb(103, 58, 183);
|
||||
} */
|
||||
.btn-custom {
|
||||
margin-top: 20px;
|
||||
position: relative;
|
||||
left: 240px;
|
||||
background-color: rgb(103, 58, 183);
|
||||
border-color: rgb(103, 58, 183);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Assuming you have a stylesheet named styles.css */
|
||||
.btn.btn-primary.btn-block {
|
||||
margin-top: 20px;
|
||||
position: relative;
|
||||
background-color: rgb(103, 58, 183);
|
||||
border-color: rgb(103, 58, 183);
|
||||
color: white;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,220 @@
|
|||
body {
|
||||
background-color: rgb(240, 235, 248);
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.form_container_top {
|
||||
box-sizing: border-box;
|
||||
margin-top: 10px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
line-height: 100%;
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
border-bottom: 1px solid #f4f4f9;
|
||||
color: black;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.form-header {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
margin-bottom: 10px;
|
||||
margin-left: 240px;
|
||||
border-radius: 10px 10px 0 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
border-top: 10px solid rgb(103, 58, 183);
|
||||
width: 56%;
|
||||
}
|
||||
|
||||
.form-header h2 {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#preview-btn {
|
||||
margin-right: 10px;
|
||||
background-color: rgb(103, 58, 183);
|
||||
border-color: #007bff;
|
||||
border-radius: 50%;
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#preview-btn i {
|
||||
font-size: 1.5em;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#add-section-btn {
|
||||
position: absolute;
|
||||
left: -60px;
|
||||
top: 24px;
|
||||
z-index: 1000;
|
||||
border-radius: 50%;
|
||||
background-color: rgb(103, 58, 183);
|
||||
color: white;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.5em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
background-color: white;
|
||||
width: 56%;
|
||||
margin-bottom: 30px;
|
||||
margin-left: 240px;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.form-section.active {
|
||||
border-left: 6px solid rgb(66, 133, 244);
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.header-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.untitled-question {
|
||||
flex: 1;
|
||||
margin-right: 10px;
|
||||
width: calc(100% - 230px);
|
||||
}
|
||||
|
||||
.custom-select {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.delete-section-icon {
|
||||
cursor: pointer;
|
||||
color: grey;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.options-container {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.options-container select {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.form-section textarea {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.option input[type="radio"],
|
||||
.option input[type="checkbox"] {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.option .delete-option-icon {
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
color: grey;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.option-label {
|
||||
width: 42%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.add-option-btn {
|
||||
background-color: #f0f0f0;
|
||||
color: #333;
|
||||
margin-top: 11px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.ui-state-highlight {
|
||||
background-color: transparent !important;
|
||||
border: none !important;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 10px;
|
||||
width: 56%;
|
||||
margin-left: 240px;
|
||||
}
|
||||
|
||||
/* Toggle Switch CSS */
|
||||
.toggle-switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 34px;
|
||||
height: 20px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.toggle-switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc;
|
||||
transition: .4s;
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
background-color: white;
|
||||
transition: .4s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: rgb(103, 58, 183);
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
transform: translateX(14px);
|
||||
}
|
||||
|
||||
.body_header_bg {
|
||||
background-color: rgb(240, 235, 248);
|
||||
}
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
$(document).ready(function() {
|
||||
var base_url = '<?php echo base_url(); ?>';
|
||||
|
||||
// Add section button functionality
|
||||
$('#add-section-btn').on('click', function() {
|
||||
var sectionHtml = `
|
||||
<div class="form-section">
|
||||
<div class="header-row">
|
||||
<textarea class="form-control untitled-question" placeholder="Untitled Question" rows="1"></textarea>
|
||||
<select class="custom-select">
|
||||
<option value="short-answer">Short Answer</option>
|
||||
<option value="paragraph">Paragraph</option>
|
||||
<option value="multiple-choice">Multiple Choice</option>
|
||||
<option value="checkboxes">Checkboxes</option>
|
||||
<option value="dropdown">Dropdown</option>
|
||||
</select>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" class="required-toggle">
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<span class="delete-section-icon"><i class="fas fa-trash-alt"></i></span>
|
||||
</div>
|
||||
<div class="options-container"></div>
|
||||
<button class="btn btn-secondary add-option-btn">Add Option</button>
|
||||
</div>
|
||||
`;
|
||||
$('#form-container').append(sectionHtml);
|
||||
});
|
||||
|
||||
// Add option button functionality
|
||||
$(document).on('click', '.add-option-btn', function() {
|
||||
var optionHtml = `
|
||||
<div class="option">
|
||||
<input type="text" class="form-control option-label" placeholder="Option">
|
||||
<span class="delete-option-icon">×</span>
|
||||
</div>
|
||||
`;
|
||||
$(this).siblings('.options-container').append(optionHtml);
|
||||
});
|
||||
|
||||
// Delete option functionality
|
||||
$(document).on('click', '.delete-option-icon', function() {
|
||||
$(this).parent().remove();
|
||||
});
|
||||
|
||||
// Delete section functionality
|
||||
$(document).on('click', '.delete-section-icon', function() {
|
||||
$(this).closest('.form-section').remove();
|
||||
});
|
||||
|
||||
// Submit button functionality
|
||||
$('#submit-btn').on('click', function() {
|
||||
var formData = collectFormData();
|
||||
formData['form_id'] = <?php echo $form['id']; ?>;
|
||||
|
||||
$.ajax({
|
||||
url: base_url + 'Form_controller/update_form',
|
||||
type: 'POST',
|
||||
data: { formData: formData },
|
||||
dataType: 'JSON',
|
||||
success: function(response) {
|
||||
if (response.status === 'success') {
|
||||
alert('Form updated successfully!');
|
||||
} else {
|
||||
alert(response.message);
|
||||
}
|
||||
},
|
||||
error: function(error) {
|
||||
alert('Error updating form!');
|
||||
console.log(error);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Collect form data function
|
||||
function collectFormData() {
|
||||
var formData = {
|
||||
title: $('#form-title').val(),
|
||||
description: $('#form-description').val(),
|
||||
questions: []
|
||||
};
|
||||
|
||||
$('.form-section').each(function() {
|
||||
var questionData = {
|
||||
id: $(this).data('index'),
|
||||
text: $(this).find('.untitled-question').val(),
|
||||
type: $(this).find('.custom-select').val(),
|
||||
required: $(this).find('.required-toggle').is(':checked'),
|
||||
options: []
|
||||
};
|
||||
|
||||
$(this).find('.option-label').each(function() {
|
||||
questionData.options.push($(this).val());
|
||||
});
|
||||
|
||||
formData.questions.push(questionData);
|
||||
});
|
||||
|
||||
return formData;
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
$(document).ready(function() {
|
||||
var base_url = '<?php echo base_url(); ?>';
|
||||
|
||||
// Add section button functionality
|
||||
$('#add-section-btn').on('click', function() {
|
||||
var sectionHtml = `
|
||||
<div class="form-section" data-type="">
|
||||
<div class="header-row">
|
||||
<textarea class="form-control untitled-question" placeholder="Untitled Question" rows="1"></textarea>
|
||||
<select class="custom-select">
|
||||
<option value="short-answer">Short Answer</option>
|
||||
<option value="paragraph">Paragraph</option>
|
||||
<option value="multiple-choice">Multiple Choice</option>
|
||||
<option value="checkboxes">Checkboxes</option>
|
||||
<option value="dropdown">Dropdown</option>
|
||||
</select>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" class="required-toggle">
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<span class="delete-section-icon"><i class="fas fa-trash-alt"></i></span>
|
||||
</div>
|
||||
<div class="options-container"></div>
|
||||
<button class="btn btn-secondary add-option-btn" style="display: none;">Add Option</button>
|
||||
</div>
|
||||
`;
|
||||
$('#form-container').append(sectionHtml);
|
||||
});
|
||||
|
||||
// Add option button functionality
|
||||
$(document).on('click', '.add-option-btn', function() {
|
||||
var optionHtml = `
|
||||
<div class="option">
|
||||
<input type="text" class="form-control option-label" placeholder="Option">
|
||||
<span class="delete-option-icon">×</span>
|
||||
</div>
|
||||
`;
|
||||
$(this).siblings('.options-container').append(optionHtml);
|
||||
});
|
||||
|
||||
// Delete option functionality
|
||||
$(document).on('click', '.delete-option-icon', function() {
|
||||
$(this).parent().remove();
|
||||
});
|
||||
|
||||
// Delete section functionality
|
||||
$(document).on('click', '.delete-section-icon', function() {
|
||||
$(this).closest('.form-section').remove();
|
||||
});
|
||||
|
||||
// Show/Hide "Add Option" button based on question type
|
||||
$(document).on('change', '.custom-select', function() {
|
||||
var type = $(this).val();
|
||||
var $section = $(this).closest('.form-section');
|
||||
if (type === 'multiple-choice' || type === 'checkboxes' || type === 'dropdown') {
|
||||
$section.find('.add-option-btn').show();
|
||||
} else {
|
||||
$section.find('.add-option-btn').hide();
|
||||
}
|
||||
}).trigger('change'); // Trigger change to apply to existing sections
|
||||
|
||||
// Submit button functionality
|
||||
$('#submit-btn').on('click', function() {
|
||||
var formData = collectFormData();
|
||||
formData['form_id'] = <?php echo $form['id']; ?>;
|
||||
|
||||
let validation = validateFormData(formData);
|
||||
if (!validation.isValid) {
|
||||
alert(validation.message);
|
||||
return;
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: base_url + 'Form_controller/update_form',
|
||||
type: 'POST',
|
||||
data: { formData: formData },
|
||||
dataType: 'JSON',
|
||||
success: function(response) {
|
||||
if (response.status === 'success') {
|
||||
alert('Form updated successfully!');
|
||||
window.location.href = base_url + 'Form_controller/index_forms_draft';
|
||||
} else {
|
||||
alert(response.message);
|
||||
}
|
||||
},
|
||||
error: function(error) {
|
||||
alert('Error updating form!');
|
||||
console.log(error);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Collect form data function
|
||||
function collectFormData() {
|
||||
var formData = {
|
||||
title: $('#form-title').val(),
|
||||
description: $('#form-description').val(),
|
||||
questions: []
|
||||
};
|
||||
|
||||
$('.form-section').each(function() {
|
||||
var questionData = {
|
||||
id: $(this).data('index'),
|
||||
text: $(this).find('.untitled-question').val(),
|
||||
type: $(this).find('.custom-select').val(),
|
||||
required: $(this).find('.required-toggle').is(':checked') ? 1 : 0, // Correctly capture the required value
|
||||
options: []
|
||||
};
|
||||
|
||||
$(this).find('.option-label').each(function() {
|
||||
questionData.options.push($(this).val());
|
||||
});
|
||||
|
||||
formData.questions.push(questionData);
|
||||
});
|
||||
|
||||
return formData;
|
||||
}
|
||||
function validateFormData(formData) {
|
||||
for (let question of formData.questions) {
|
||||
if (!question.text.trim()) {
|
||||
return { isValid: false, message: 'All questions must have text.' };
|
||||
}
|
||||
if ((question.type === 'multiple-choice' || question.type === 'checkboxes' || question.type === 'dropdown') && question.options.length === 0) {
|
||||
return { isValid: false, message: 'All options-based questions must have at least one option.' };
|
||||
}
|
||||
for (let option of question.options) {
|
||||
if (!option.trim()) {
|
||||
return { isValid: false, message: 'All options must have text.' };
|
||||
}
|
||||
}
|
||||
}
|
||||
return { isValid: true };
|
||||
}
|
||||
});
|
||||
|
|
@ -2,22 +2,22 @@ $(document).ready(function() {
|
|||
let index = 1;
|
||||
let activeSection = null;
|
||||
|
||||
// Add option function
|
||||
function addOption(type, container) {
|
||||
let optionIndex = container.children().length + 1;
|
||||
// let optionIndex = container.children().length + 1;
|
||||
let optionHtml;
|
||||
if (type === 'multiple-choice' || type === 'checkboxes') {
|
||||
optionHtml = `
|
||||
<div class="option">
|
||||
<input type="${type === 'multiple-choice' ? 'radio' : 'checkbox'}" disabled>
|
||||
<input type="text" class="form-control option-label" value="Option ${optionIndex}">
|
||||
<input type="text" class="form-control option-label" >
|
||||
<span class="delete-option-icon">×</span>
|
||||
</div>
|
||||
`;
|
||||
} else if (type === 'dropdown') {
|
||||
}
|
||||
else if (type === 'dropdown') {
|
||||
optionHtml = `
|
||||
<div class="option">
|
||||
<input type="text" class="form-control option-label" value="Option ${optionIndex}">
|
||||
<input type="text" class="form-control option-label">
|
||||
<span class="delete-option-icon">×</span>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -25,7 +25,6 @@ $(document).ready(function() {
|
|||
container.append(optionHtml);
|
||||
}
|
||||
|
||||
// Form section function
|
||||
function createFormSection() {
|
||||
let newSection = `
|
||||
<div class="form-section" data-index="${index}">
|
||||
|
|
@ -50,7 +49,6 @@ $(document).ready(function() {
|
|||
`;
|
||||
$('#form-container').append(newSection);
|
||||
index++;
|
||||
|
||||
positionAddSectionButton();
|
||||
}
|
||||
|
||||
|
|
@ -68,8 +66,6 @@ $(document).ready(function() {
|
|||
}
|
||||
}
|
||||
|
||||
// Event handler is triggered
|
||||
// creates a new form section;sets it as active;repositions the add section button
|
||||
$('#add-section-btn').on('click', function() {
|
||||
createFormSection();
|
||||
$('.form-section').removeClass('active');
|
||||
|
|
@ -78,12 +74,10 @@ $(document).ready(function() {
|
|||
positionAddSectionButton();
|
||||
});
|
||||
|
||||
// It updates the options container based on the selected type, adding the necessary input fields or buttons.
|
||||
$(document).on('change', '.custom-select', function() {
|
||||
let type = $(this).val();
|
||||
let container = $(this).closest('.form-section').find('.options-container');
|
||||
container.empty();
|
||||
|
||||
$(this).closest('.form-section').find('.add-option-btn').remove();
|
||||
|
||||
if (type === 'short-answer') {
|
||||
|
|
@ -96,16 +90,12 @@ $(document).ready(function() {
|
|||
}
|
||||
});
|
||||
|
||||
// add option event handler
|
||||
// adds a new option to the options container and updates the option numbers
|
||||
$(document).on('click', '.add-option-btn', function() {
|
||||
let type = $(this).closest('.form-section').find('.custom-select').val();
|
||||
let container = $(this).closest('.form-section').find('.options-container');
|
||||
addOption(type, container);
|
||||
// refreshOptionNumbers(container);
|
||||
});
|
||||
|
||||
// removes the section;updates the active section;repositions add section button
|
||||
$(document).on('click', '.delete-section-icon', function() {
|
||||
let section = $(this).closest('.form-section');
|
||||
let prevSection = section.prev('.form-section');
|
||||
|
|
@ -116,28 +106,26 @@ $(document).ready(function() {
|
|||
}
|
||||
if (prevSection.length > 0) {
|
||||
prevSection.find('.delete-section-icon').appendTo(prevSection.find('.form-section'));
|
||||
activeSection = prevSection;
|
||||
} else if (nextSection.length > 0) {
|
||||
activeSection = prevSection;row
|
||||
}
|
||||
else if (nextSection.length > 0) {
|
||||
nextSection.find('.delete-section-icon').appendTo(nextSection.find('.form-header'));
|
||||
activeSection = nextSection;
|
||||
}
|
||||
|
||||
positionAddSectionButton();
|
||||
});
|
||||
|
||||
// delete option
|
||||
$(document).on('click', '.delete-option-icon', function() {
|
||||
let option = $(this).closest('.option');
|
||||
let container = option.closest('.options-container');
|
||||
option.remove();
|
||||
K });
|
||||
|
||||
// Event handler for required toggle button
|
||||
});
|
||||
|
||||
$(document).on('click', '.required-toggle', function() {
|
||||
$(this).closest('.form-section').toggleClass('required');
|
||||
});
|
||||
|
||||
// Preview button functionality
|
||||
$('#preview-btn').on('click', function() {
|
||||
let previewWindow = window.open('', '_blank');
|
||||
let previewContent = `
|
||||
|
|
@ -210,7 +198,6 @@ K });
|
|||
previewWindow.document.close();
|
||||
});
|
||||
|
||||
// Activate the section;repositions add section button
|
||||
$(document).on('click', '.form-section', function() {
|
||||
$('.form-section').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
|
|
@ -228,5 +215,83 @@ K });
|
|||
}
|
||||
});
|
||||
|
||||
function collectFormData() {
|
||||
var formData = {
|
||||
questions: []
|
||||
};
|
||||
|
||||
$('.form-section').each(function() {
|
||||
var questionType = $(this).find('.custom-select').val();
|
||||
var questionData = {
|
||||
text: $(this).find('.untitled-question').val(),
|
||||
type: questionType,
|
||||
is_required: $(this).find('.required-toggle').is(':checked'),
|
||||
options: []
|
||||
};
|
||||
|
||||
// Only add options if the question type supports them
|
||||
if (questionType === 'multiple-choice' || questionType === 'checkboxes' || questionType === 'dropdown') {
|
||||
$(this).find('.option-label').each(function() {
|
||||
questionData.options.push($(this).val());
|
||||
});
|
||||
}
|
||||
|
||||
formData.questions.push(questionData);
|
||||
});
|
||||
|
||||
console.log(formData);
|
||||
return formData;
|
||||
}
|
||||
|
||||
|
||||
function validateFormData(formData) {
|
||||
for (let question of formData.questions) {
|
||||
if (!question.text.trim()) {
|
||||
return { isValid: false, message: 'All questions must have text.' };
|
||||
}
|
||||
if ((question.type === 'multiple-choice' || question.type === 'checkboxes' || question.type === 'dropdown') && question.options.length === 0) {
|
||||
return { isValid: false, message: 'All options-based questions must have at least one option.' };
|
||||
}
|
||||
for (let option of question.options) {
|
||||
if (!option.trim()) {
|
||||
return { isValid: false, message: 'All options must have text.' };
|
||||
}
|
||||
}
|
||||
}
|
||||
return { isValid: true };
|
||||
}
|
||||
$('#submit-btn').on('click', function() {
|
||||
let formData = collectFormData();
|
||||
console.log(formData);
|
||||
|
||||
let validation = validateFormData(formData);
|
||||
if (!validation.isValid) {
|
||||
alert(validation.message);
|
||||
return;
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: base_url + 'New_form_controller/submit_form',
|
||||
type: 'POST',
|
||||
data: { formData: formData },
|
||||
dataType: 'JSON',
|
||||
success: function(response) {
|
||||
if (response.status === 'success') {
|
||||
alert('Form submitted successfully!');
|
||||
// Redirect to Form_controller/index_forms
|
||||
window.location.href = base_url + 'Form_controller/index_forms';
|
||||
} else {
|
||||
alert(response.message);
|
||||
// console.log(response);
|
||||
}
|
||||
},
|
||||
error: function(error) {
|
||||
alert('Error submitting form!');
|
||||
window.location.href = base_url + 'Form_controller/index_forms';
|
||||
console.log(error);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('#form-container').disableSelection();
|
||||
});
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
$(document).ready(function() {
|
||||
let index = 1;
|
||||
let activeSection = null;
|
||||
|
||||
function addOption(type, container) {
|
||||
let optionHtml;
|
||||
if (type === 'multiple-choice' || type === 'checkboxes') {
|
||||
optionHtml = `
|
||||
<div class="option">
|
||||
<input type="${type === 'multiple-choice' ? 'radio' : 'checkbox'}" disabled>
|
||||
<input type="text" class="form-control option-label">
|
||||
<span class="delete-option-icon">×</span>
|
||||
</div>
|
||||
`;
|
||||
} else if (type === 'dropdown') {
|
||||
optionHtml = `
|
||||
<div class="option">
|
||||
<input type="text" class="form-control option-label">
|
||||
<span class="delete-option-icon">×</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
container.append(optionHtml);
|
||||
}
|
||||
|
||||
function createFormSection() {
|
||||
let newSection = `
|
||||
<div class="form-section" data-index="${index}">
|
||||
<div class="header-row">
|
||||
${index === 1 ? '<div class="violet-border"></div>' : ''}
|
||||
<textarea class="form-control untitled-question" placeholder="Untitled Question" rows="1"></textarea>
|
||||
<select class="custom-select">
|
||||
<option value="short-answer">Short Answer</option>
|
||||
<option value="paragraph">Paragraph</option>
|
||||
<option value="multiple-choice">Multiple Choice</option>
|
||||
<option value="checkboxes">Checkboxes</option>
|
||||
<option value="dropdown">Dropdown</option>
|
||||
</select>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" class="required-toggle">
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<span class="delete-section-icon"><i class="fas fa-trash-alt"></i></span>
|
||||
</div>
|
||||
<div class="options-container"></div>
|
||||
</div>
|
||||
`;
|
||||
$('#form-container').append(newSection);
|
||||
index++;
|
||||
|
||||
positionAddSectionButton();
|
||||
}
|
||||
|
||||
function positionAddSectionButton() {
|
||||
if (activeSection) {
|
||||
let position = activeSection.position();
|
||||
let buttonWidth = $('#add-section-btn').outerWidth();
|
||||
let buttonHeight = $('#add-section-btn').outerHeight();
|
||||
|
||||
$('#add-section-btn').css({
|
||||
position: 'absolute',
|
||||
left: position.left - buttonWidth - 47 + 'px',
|
||||
top: position.top + activeSection.height() / 2 - buttonHeight / 2 + 'px'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
$('#add-section-btn').on('click', function() {
|
||||
createFormSection();
|
||||
$('.form-section').removeClass('active');
|
||||
activeSection = $('.form-section').last();
|
||||
activeSection.addClass('active');
|
||||
positionAddSectionButton();
|
||||
});
|
||||
|
||||
$(document).on('change', '.custom-select', function() {
|
||||
let type = $(this).val();
|
||||
let container = $(this).closest('.form-section').find('.options-container');
|
||||
container.empty();
|
||||
|
||||
$(this).closest('.form-section').find('.add-option-btn').remove();
|
||||
|
||||
if (type === 'short-answer') {
|
||||
container.append('<input type="text" class="form-control" disabled placeholder="Short answer text">');
|
||||
} else if (type === 'paragraph') {
|
||||
container.append('<textarea class="form-control" disabled placeholder="Paragraph text"></textarea>');
|
||||
} else {
|
||||
addOption(type, container);
|
||||
$(this).closest('.form-section').append('<button class="btn btn-secondary add-option-btn">Add Option</button>');
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
Loading…
Reference in New Issue