This commit is contained in:
RameshT 2024-07-26 18:11:46 +05:30
parent fd2250fdc1
commit 2d73e91eb8
25 changed files with 924 additions and 521 deletions

View File

@ -3,7 +3,18 @@ defined('BASEPATH') or exit('No direct script access allowed');
class Form_controller extends CI_Controller class Form_controller extends CI_Controller
{ {
public function index() {
// Fetch the data
$this->load->model('Form_model');
$this->load->model('Response_model');
$data['total_forms'] = $this->Form_model->get_total_forms();
$data['published_forms'] = $this->Form_model->get_published_forms();
$data['total_responses'] = $this->Response_model->get_total_responses();
// var_dump($data);
// Load the view and pass the data
$this->load->view('list_forms', $data);
}
public function index_forms($form_id = null) public function index_forms($form_id = null)
{ {
$this->load->model('Frontend_model'); $this->load->model('Frontend_model');

View File

@ -34,33 +34,42 @@ class Forms extends CI_Controller
} }
public function response_preview($form_id) public function response_preview($form_id)
{ {
if (!$this->session->userdata('logged_in')) { if (!$this->session->userdata('logged_in')) {
// If not logged in, redirect to login page // If not logged in, redirect to login page with form_id as a parameter
redirect('users/login/'.$form_id); 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);
} }
// 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);
// Check if the form is responsive
if ($form->is_responsive == 0) {
// Pass a message to the view
$data['message'] = "This form is not accepting responses.";
$this->load->view('response_submit', $data);
return;
}
// 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) { public function preview_back($form_id) {
if (!$this->session->userdata('logged_in')) { if (!$this->session->userdata('logged_in')) {
// If not logged in, redirect to login page // If not logged in, redirect to login page

View File

@ -46,9 +46,36 @@ class Publish_controller extends CI_Controller {
} }
$this->load->model('Publish_model'); $this->load->model('Publish_model');
// Update is_published to 0 // Update is_published to 0
$this->Publish_model->update_form($form_id, ['is_published' => 0]); $this->Publish_model->update_form($form_id, ['is_responsive' => 1]);
// Redirect to the list_user_published_forms function
redirect('published_forms'); // redirect('published_forms');
} }
public function toggle_responsive($form_id) {
if (!$this->session->userdata('logged_in')) {
redirect('users/login');
}
$is_responsive = $this->input->post('is_responsive', true);
if ($is_responsive === null) {
log_message('error', 'is_responsive is null');
echo json_encode(['success' => false, 'message' => 'Invalid data received']);
return;
}
log_message('info', 'is_responsive received: ' . $is_responsive);
$this->load->model('Publish_model');
$update_result = $this->Publish_model->update_form($form_id, ['is_responsive' => $is_responsive]);
if ($update_result) {
echo json_encode(['success' => true]);
} else {
log_message('error', 'Failed to update is_responsive');
echo json_encode(['success' => false, 'message' => 'Failed to update']);
}
}
} }

View File

@ -29,26 +29,20 @@ class Users extends CI_Controller
} }
/**
* function to login into google forms
* @param null
* @return mixed(data return type)
* @author torun
*/
public function login($form_id = null) public function login($form_id = null)
{ {
$data['title'] = 'Sign In'; $data['title'] = 'Sign In';
$data['form_id'] = $form_id; $data['form_id'] = $form_id;
$this->form_validation->set_rules('username', 'Username', 'required'); $this->form_validation->set_rules('username', 'Username', 'required');
$this->form_validation->set_rules('password', 'Password', 'required'); $this->form_validation->set_rules('password', 'Password', 'required');
if ($this->form_validation->run() === FALSE) { if ($this->form_validation->run() === FALSE) {
$this->load->view('templates/header'); $this->load->view('templates/header');
$this->load->view('users/login', $data); $this->load->view('users/login', $data);
$this->load->view('templates/footer'); $this->load->view('templates/footer');
} else { } else {
// Get username // Get username
$username = $this->input->post('username'); $username = $this->input->post('username');
// Get and encrypt the password // Get and encrypt the password
@ -56,7 +50,7 @@ class Users extends CI_Controller
$this->load->model('user_model'); $this->load->model('user_model');
// Login user // Login user
$person_id = $this->user_model->login($username, $password); $person_id = $this->user_model->login($username, $password);
if ($person_id) { if ($person_id) {
// Create session // Create session
$user_data = array( $user_data = array(
@ -64,24 +58,22 @@ class Users extends CI_Controller
'username' => $username, 'username' => $username,
'logged_in' => true 'logged_in' => true
); );
$this->session->set_userdata($user_data); $this->session->set_userdata($user_data);
$person_id = $this->session->userdata('user_id');
// Set message // Set message
$this->session->set_flashdata('user_loggedin', 'You are now logged in'); $this->session->set_flashdata('user_loggedin', 'You are now logged in');
if ($form_id) { if ($form_id) {
redirect('forms/response_preview/'.$form_id); redirect('forms/response_preview/' . $form_id);
} else { } else {
redirect('home'); } redirect('home');
}
} else { } else {
// Set message // Set message
$this->session->set_flashdata('login_failed', 'Login is invalid'); $this->session->set_flashdata('login_failed', 'Login is invalid');
redirect('users/login'); redirect('users/login/' . $form_id);
} }
} }
} }

View File

@ -1,9 +1,27 @@
<?php <?php
defined('BASEPATH') OR exit('No direct script access allowed'); defined('BASEPATH') or exit('No direct script access allowed');
class Form_model extends CI_Model { class Form_model extends CI_Model
{
public function save_form($form_data) { // Get the total number of forms
public function get_total_forms()
{
$this->load->database();
return $this->db->count_all('forms');
}
// Get the number of published forms
public function get_published_forms()
{
$this->load->database();
$this->db->where('is_published', 1);
return $this->db->count_all_results('forms');
}
public function save_form($form_data)
{
$this->db->trans_start(); $this->db->trans_start();
foreach ($form_data as $section) { foreach ($form_data as $section) {
@ -37,20 +55,22 @@ class Form_model extends CI_Model {
return true; return true;
} }
} }
public function __construct() { public function __construct()
{
$this->load->database(); $this->load->database();
} }
public function get_form_title($form_id) { public function get_form_title($form_id)
{
$this->db->select('title'); // Assuming the title column in the forms table is called 'title' $this->db->select('title'); // Assuming the title column in the forms table is called 'title'
$this->db->from('forms'); $this->db->from('forms');
$this->db->where('id', $form_id); $this->db->where('id', $form_id);
$query = $this->db->get(); $query = $this->db->get();
if ($query->num_rows() > 0) { if ($query->num_rows() > 0) {
return $query->row()->title; return $query->row()->title;
} else { } else {
return null; return null;
} }
} }
} }

View File

@ -16,4 +16,4 @@ public function get_published_forms_by_user($user_id) {
return $query->result(); return $query->result();
} }
} }

View File

@ -1,7 +1,14 @@
<?php <?php
class Response_model extends CI_Model class Response_model extends CI_Model
{ {
// 888888888888888888888 public function __construct() {
$this->load->database();
}
// Get the total number of responses
public function get_total_responses() {
return $this->db->count_all('responses');
}
public function insert_response($data) public function insert_response($data)
{ {
@ -107,3 +114,4 @@ class Response_model extends CI_Model
return $query->row(); return $query->row();
} }
} }

View File

@ -1,65 +1,96 @@
<style>/* CSS styles */ <!DOCTYPE html>
.title-column { <html lang="en">
color: darkblue; /* Dark blue color for title */ <head>
} <!-- Other head elements -->
</style> <meta charset="UTF-8">
<div class="container"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="row"> <title>Form List</title>
<div class="col-md-12 mt-4"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<div class="card"> <link rel="stylesheet" href="styles.css"> <!-- Link to your stylesheet -->
<div class="card-header"> <style>
<?php if ($this->session->flashdata('status')): ?> .title-column {
<div class="alert alert-success"> color: darkblue; /* Dark blue color for title */
<?= $this->session->flashdata('status'); ?> }
</div> </style>
<?php endif; ?> </head>
<h3> <body>
Drafts <div class="container">
</h3> <div class="row">
</div> <div class="col-md-12 mt-4">
<div class="card-body"> <div class="card">
<!-- here your table will occur --> <div class="card-header">
<table id="basetable1" class="table table-bordered"> <?php if ($this->session->flashdata('status')): ?>
<thead> <div class="alert alert-success">
<tr> <?= $this->session->flashdata('status'); ?>
<th>Drafts</th> </div>
<th>Title</th> <?php endif; ?>
<th>Created On</th> <h3>Drafts</h3>
<th>Edit</th> </div>
<th>Delete</th> <div class="card-body">
<th>Preview</th> <table id="basetable1" class="table table-bordered">
</tr> <thead>
</thead> <tr>
<tbody> <th>Drafts</th>
<?php <th>Title</th>
$serialNumber = 1; // Initialize the counter variable <th>Created On</th>
foreach ($forms as $row): ?> <th>Edit</th>
<tr> <th>Delete</th>
<td><?php echo $serialNumber++; ?></td> <th>Preview</th>
<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('publish/' . $row->id); ?>">
<i class="fas fa-eye"></i> <!-- Eye icon -->
</a>
</td>
</tr> </tr>
<?php endforeach; ?> </thead>
</tbody> <tbody>
</table> <?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 date('Y-m-d H:i:s', strtotime($row->created_at)); ?></td> <!-- Ensure date is in a sortable format -->
<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('publish/' . $row->id); ?>">
<i class="fas fa-eye"></i> <!-- Eye icon -->
</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <script>
document.addEventListener('DOMContentLoaded', function() {
const table = document.getElementById('basetable1');
const tbody = table.querySelector('tbody');
const rows = Array.from(tbody.querySelectorAll('tr'));
rows.sort((rowA, rowB) => {
const dateTextA = rowA.cells[2].textContent.trim();
const dateTextB = rowB.cells[2].textContent.trim();
const dateA = new Date(dateTextA);
const dateB = new Date(dateTextB);
if (isNaN(dateA.getTime())) {
return 1;
}
if (isNaN(dateB.getTime())) {
return -1;
}
return dateB - dateA;
});
rows.forEach(row => tbody.appendChild(row));
});
</script>
</body>
</html>

View File

@ -7,82 +7,90 @@
<title>Form List</title> <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="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 --> <link rel="stylesheet" href="styles.css"> <!-- Link to your stylesheet -->
<style>
.title-column {
color: darkblue; /* Dark blue color for title */
}
</style>
</head> </head>
<body> <body>
<style>/* CSS styles */ <div class="container">
.title-column { <div class="row">
color: darkblue; /* Dark blue color for title */ <div class="col-md-12 mt-4">
} <div class="card">
<div class="card-header">
.draft-row { <?php if ($this->session->flashdata('status')): ?>
background-color: #f0f0f0; /* Light grey background for draft status */ <div class="alert alert-success">
} <?= $this->session->flashdata('status'); ?>
</style> </div>
<div class="container"> <?php endif; ?>
<div class="row"> <h3>Drafts</h3>
<div class="col-md-12 mt-4 "> </div>
<div class="card"> <div class="card-body">
<div class="card-header"> <table id="basetable1" class="table table-bordered">
<?php if ($this->session->flashdata('status')): ?> <thead>
<div class="alert alert-success"> <tr>
<?= $this->session->flashdata('status'); ?> <th>Drafts</th>
</div> <th>Title</th>
<?php endif; ?> <th>Created On</th>
<h3> <th>Edit</th>
List of Forms <th>Delete</th>
</h3> <th>Preview</th>
</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>Responses</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">
<a href="<?php echo base_url('publish/' . $row->id); ?>"><?php echo $row->title; ?></a>
</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('responses/' . $row->id); ?>">
<i class="fas fa-eye"></i> <!-- Eye icon -->
</a>
</td>
</tr> </tr>
<?php endforeach; ?> </thead>
</tbody> <tbody>
</table> <?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 date('Y-m-d H:i:s', strtotime($row->created_at)); ?></td> <!-- Ensure date is in a sortable format -->
<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('publish/' . $row->id); ?>">
<i class="fas fa-eye"></i> <!-- Eye icon -->
</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <script>
document.addEventListener('DOMContentLoaded', function() {
const table = document.getElementById('basetable1');
const tbody = table.querySelector('tbody');
const rows = Array.from(tbody.querySelectorAll('tr'));
<script> rows.sort((rowA, rowB) => {
function updateSerialNumbers() { const dateTextA = rowA.cells[2].textContent.trim();
const table = document.getElementById('basetable1'); const dateTextB = rowB.cells[2].textContent.trim();
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); const dateA = new Date(dateTextA);
// If you have sorting functionality, call updateSerialNumbers after sorting const dateB = new Date(dateTextB);
</script>
if (isNaN(dateA.getTime())) {
return 1;
}
if (isNaN(dateB.getTime())) {
return -1;
}
return dateB - dateA;
});
rows.forEach(row => tbody.appendChild(row));
});
</script>
</body> </body>
</html> </html>

View File

@ -8,6 +8,8 @@
<link rel="stylesheet" href="https://bootswatch.com/3/flatly/bootstrap.min.css"> <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/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/header_new.css">
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/editview.css">
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/jquery-ui.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"> <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://code.jquery.com/jquery-3.6.0.min.js"></script>
@ -20,28 +22,8 @@
<body> <body>
<style> <style>
.form-header {
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
.form-title,
.form-description {
border: none;
border-bottom: 1px solid #ccc;
margin-bottom: 10px;
padding-left: 0;
padding-right: 0;
width: 100%;
}
.form-title:focus,
.form-description:focus {
box-shadow: none;
outline: none;
border-bottom: 1px solid #007bff;
}
</style> </style>
<!-- Navbar --> <!-- Navbar -->
<nav class="navbar navbar-custom"> <nav class="navbar navbar-custom">
@ -93,170 +75,226 @@
<?php endif; ?> <?php endif; ?>
</div> </div>
<!-- Form Editor -->
<div class="container">
<!-- Your flash messages and other content -->
<!-- Form Editor -->
<div class="container">
<!-- Your flash messages and other content -->
<!-- Form Editor --> <!-- Form Editor -->
<div class="container"> <div class="container">
<div class="form-header"> <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 form-title" value="<?php echo $form['title']; ?>"> <input type="text" id="form-title" class="form-control form-title" value="<?php echo $form['title']; ?>">
<input type="text" id="form-description" class="form-control form-description" value="<?php echo $form['description']; ?>"> <input type="text" id="form-description" class="form-control form-description" value="<?php echo $form['description']; ?>">
<button id="add-section-btn" class="btn btn-primary">+</button> <button id="add-section-btn" class="btn btn-primary">+</button>
</div> </div>
<div id="form-container"> <div id="form-container">
<?php foreach ($questions as $question): ?> <?php foreach ($questions as $question): ?>
<div class="form-section" data-index="<?php echo $question['id']; ?>" <div class="form-section" data-index="<?php echo $question['id']; ?>" data-type="<?php echo $question['type']; ?>">
data-type="<?php echo $question['type']; ?>"> <div class="header-row">
<div class="header-row"> <input type="text" class="form-control untitled-question" placeholder="Untitled Question" rows="1" value="<?php echo $question['text']; ?>">
<input type="text" class="form-control untitled-question" placeholder="Untitled Question" rows="1" <select class="custom-select question-type">
value="<?php echo $question['text']; ?>"> <option value="short-answer" <?php echo $question['type'] == 'short-answer' ? 'selected' : ''; ?>>Short Answer</option>
<select class="custom-select"> <option value="paragraph" <?php echo $question['type'] == 'paragraph' ? 'selected' : ''; ?>>Paragraph</option>
<option value="short-answer" <?php echo $question['type'] == 'short-answer' ? 'selected' : ''; ?>> <option value="multiple-choice" <?php echo $question['type'] == 'multiple-choice' ? 'selected' : ''; ?>>Multiple Choice</option>
Short Answer</option> <option value="checkboxes" <?php echo $question['type'] == 'checkboxes' ? 'selected' : ''; ?>>Checkboxes</option>
<option value="paragraph" <?php echo $question['type'] == 'paragraph' ? 'selected' : ''; ?>> <option value="dropdown" <?php echo $question['type'] == 'dropdown' ? 'selected' : ''; ?>>Dropdown</option>
Paragraph</option> </select>
<option value="multiple-choice" <?php echo $question['type'] == 'multiple-choice' ? 'selected' : ''; ?>>Multiple Choice</option> <label class="toggle-switch">
<option value="checkboxes" <?php echo $question['type'] == 'checkboxes' ? 'selected' : ''; ?>> <input type="checkbox" class="required-toggle" <?php echo $question['is_required'] ? 'checked' : ''; ?>>
Checkboxes</option> <span class="slider"></span>
<option value="dropdown" <?php echo $question['type'] == 'dropdown' ? 'selected' : ''; ?>>Dropdown </label>
</option> <span class="delete-section-icon"><i class="fas fa-trash-alt"></i></span>
</select> </div>
<label class="toggle-switch"> <div class="options-container">
<input type="checkbox" class="required-toggle" <?php echo $question['is_required'] ? 'checked' : ''; ?>> <?php
<span class="slider"></span> $this->db->where('question_id', $question['id']);
</label> $options = $this->db->get('options')->result_array();
<span class="delete-section-icon"><i class="fas fa-trash-alt"></i></span> foreach ($options as $option):
</div> $iconClass = ($question['type'] === 'multiple-choice' || $question['type'] === 'dropdown') ? 'fa-circle' : 'fa-square';
<div class="options-container"> ?>
<?php <div class="option">
// Fetch options for this question only <i class="fas <?php echo $iconClass; ?> icon-transparent"></i>
$this->db->where('question_id', $question['id']); <input type="text" class="form-control option-label" value="<?php echo $option['option_text']; ?>">
$options = $this->db->get('options')->result_array(); <span class="delete-option-icon">&times;</span>
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">&times;</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-primary add-option-btn">Add Option</button>
<?php endif; ?>
</div> </div>
<?php endforeach; ?> <?php endforeach; ?>
</div> </div>
<?php if ($question['type'] === 'multiple-choice' || $question['type'] === 'checkboxes' || $question['type'] === 'dropdown'): ?>
<button class="btn btn-primary add-option-btn">Add Option</button>
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>
<button id="submit-btn" class="btn btn-success btn-custom">Submit</button> <button id="submit-btn" class="btn btn-success btn-custom">Submit</button>
</div> </div>
<script src="<?php echo base_url('assets/js/jquery.min.js'); ?>"></script> <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/bootstrap.min.js'); ?>"></script>
<script src="<?php echo base_url('assets/js/jquery-ui.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> <script>
$(document).ready(function () { $(document).ready(function () {
var base_url = '<?php echo base_url(); ?>'; var base_url = '<?php echo base_url(); ?>';
var index = 1; var activeSection = null;
var activeSection = null;
function positionAddSectionButton() { function positionAddSectionButton() {
if (activeSection) { if (activeSection) {
var position = activeSection.position(); var position = activeSection.position();
var buttonWidth = $('#add-section-btn').outerWidth(); var buttonWidth = $('#add-section-btn').outerWidth();
var buttonHeight = $('#add-section-btn').outerHeight(); var buttonHeight = $('#add-section-btn').outerHeight();
$('#add-section-btn').css({ $('#add-section-btn').css({
position: 'absolute', position: 'absolute',
left: position.left - buttonWidth - 47 + 'px', left: position.left - buttonWidth - 47 + 'px',
top: position.top + activeSection.height() / 2 - buttonHeight / 2 + 'px' top: position.top + activeSection.height() / 2 - buttonHeight / 2 + 'px'
}); });
} }
}
function appendNewOption(section, questionType) {
var iconClass = "";
if (questionType === "multiple-choice") {
iconClass = "fa-circle";
} else if (questionType === "checkboxes") {
iconClass = "fa-square";
} else if (questionType === "dropdown") {
iconClass = "fa-circle";
}
var optionHtml = `
<div class="option">
<i class="fas ${iconClass} icon-transparent"></i>
<input type="text" class="form-control option-label" placeholder="Option">
<span class="delete-option-icon">&times;</span>
</div>
`;
section.find('.options-container').append(optionHtml);
}
// 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">
<input type="text" class="form-control untitled-question" placeholder="Untitled Question" rows="1">
<select class="custom-select question-type">
<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-primary add-option-btn">Add Option</button>
</div>
`;
$('#form-container').append(sectionHtml);
var newSection = $('.form-section').last();
newSection.find('.question-type').on('change', function() {
var selectedType = $(this).val();
var optionsContainer = newSection.find('.options-container');
optionsContainer.empty(); // Clear previous options
if (selectedType === 'multiple-choice' || selectedType === 'checkboxes' || selectedType === 'dropdown') {
appendNewOption(newSection, selectedType);
newSection.find('.add-option-btn').show();
} else if (selectedType === 'short-answer') {
optionsContainer.append('<input type="text" class="form-control" placeholder="Short answer text">');
newSection.find('.add-option-btn').hide();
} else if (selectedType === 'paragraph') {
optionsContainer.append('<textarea class="form-control" placeholder="Paragraph text"></textarea>');
newSection.find('.add-option-btn').hide();
} else {
newSection.find('.add-option-btn').hide();
} }
});
// Add section button functionality // Initially hide add option button
$('#add-section-btn').on('click', function () { newSection.find('.add-option-btn').hide();
createFormSection();
$('.form-section').removeClass('active');
activeSection = $('.form-section').last();
activeSection.addClass('active');
positionAddSectionButton();
});
function createFormSection() { newSection.on('click', function () {
var sectionHtml = ` $('.form-section').removeClass('active');
<div class="form-section" data-type=""> $(this).addClass('active');
<div class="header-row"> activeSection = $(this);
<input type="text" class="form-control untitled-question" placeholder="Untitled Question" rows="1"> positionAddSectionButton();
<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-primary add-option-btn">Add Option</button>
</div>
`;
$('#form-container').append(sectionHtml);
// Add click event for the newly created section positionAddSectionButton();
$('.form-section').last().on('click', function () { }
$('.form-section').removeClass('active');
$(this).addClass('active');
activeSection = $(this);
positionAddSectionButton();
});
positionAddSectionButton(); $('.question-type').on('change', function() {
var section = $(this).closest('.form-section');
var selectedType = $(this).val();
var optionsContainer = section.find('.options-container');
optionsContainer.empty(); // Clear previous options
if (selectedType === 'multiple-choice' || selectedType === 'checkboxes' || selectedType === 'dropdown') {
appendNewOption(section, selectedType);
if (!section.find('.add-option-btn').length) {
section.append('<button class="btn btn-primary add-option-btn">Add Option</button>');
} }
section.find('.add-option-btn').show();
} else if (selectedType === 'short-answer') {
optionsContainer.append('<input type="text" class="form-control" placeholder="Short answer text">');
section.find('.add-option-btn').hide();
} else if (selectedType === 'paragraph') {
optionsContainer.append('<textarea class="form-control" placeholder="Paragraph text"></textarea>');
section.find('.add-option-btn').hide();
} else {
section.find('.add-option-btn').hide();
}
});
// Handle option button click $(document).on('click', '.add-option-btn', function () {
$(document).on('click', '.add-option-btn', function () { var $section = $(this).closest('.form-section');
var $section = $(this).closest('.form-section'); var questionType = $section.find('.question-type').val();
var optionHtml = ` appendNewOption($section, questionType);
<div class="option"> });
<input type="text" class="form-control option-label" value="">
<span class="delete-option-icon">&times;</span>
</div>
`;
$section.find('.options-container').append(optionHtml);
});
// Handle delete section button click $(document).on('click', '.delete-section-icon', function () {
$(document).on('click', '.delete-section-icon', function () { $(this).closest('.form-section').remove();
$(this).closest('.form-section').remove(); activeSection = null;
activeSection = null; positionAddSectionButton();
positionAddSectionButton(); });
});
// Handle delete option button click $(document).on('click', '.delete-option-icon', function () {
$(document).on('click', '.delete-option-icon', function () { $(this).closest('.option').remove();
$(this).closest('.option').remove(); });
});
$('.form-section').each(function () {
$(this).on('click', function () {
$('.form-section').removeClass('active');
$(this).addClass('active');
activeSection = $(this);
positionAddSectionButton();
});
});
$('.form-section').each(function () { $(window).on('resize', function () {
$(this).on('click', function () { positionAddSectionButton();
$('.form-section').removeClass('active'); });
$(this).addClass('active');
activeSection = $(this);
positionAddSectionButton();
});
});
// Handle window resize to reposition button
$(window).on('resize', function () {
positionAddSectionButton();
});
positionAddSectionButton();
$(document).ready(function () { $(document).ready(function () {
var base_url = '<?php echo base_url(); ?>'; var base_url = '<?php echo base_url(); ?>';

View File

@ -8,6 +8,10 @@
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/form_preview.css"> <link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/form_preview.css">
</head> </head>
<body> <body>
<style>.form-header {
margin-left: 251px; /* Adjust the value as needed */
}
</style>
<div class="container"> <div class="container">
<div class="form-header"> <div class="form-header">
<h2><?php echo $form->title; ?></h2> <h2><?php echo $form->title; ?></h2>

View File

@ -9,13 +9,32 @@
</head> </head>
<body> <body>
<style>
.container { /* Or another parent element */
position: relative; /* Create a positioning context */
}
.btn-success {
position: relative;
left: 250px;
top: -10px;
margin-bottom: 20px;
}
.form-header {
/* position: absolute; */
left: 13px;
text-align: left;
}
</style>
<div class="container"> <div class="container">
<div class="form-header"> <div class="form-header">
<h2><?php echo $form->title; ?></h2> <h2><?php echo $form->title; ?></h2>
<br> <br>
<h4><?php echo $form->description; ?></h4> <h4><?php echo $form->description; ?></h4>
</div> </div>
<?php foreach ($questions as $question): ?> <?php foreach ($questions as $question): ?>
<div class="form-section"> <div class="form-section">
<div class="question-section"> <div class="question-section">

View File

@ -1,11 +1,94 @@
<style>/* CSS styles */ <style>
.title-column { /* CSS styles */
color: darkblue; /* Dark blue color for title */ .title-column {
} color: darkblue;
/* Dark blue color for title */
}
.draft-row { .draft-row {
background-color: #f0f0f0; /* Light grey background for draft status */ background-color: #f0f0f0;
} /* Light grey background for draft status */
}
.switch {
position: relative;
display: inline-block;
width: 34px;
height: 20px;
}
.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;
}
.slider:before {
position: absolute;
content: "";
height: 14px;
width: 14px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .4s;
}
input:checked+.slider {
background-color: #673AB7;
}
input:checked+.slider:before {
transform: translateX(14px);
}
/* Rounded sliders */
.slider.round {
border-radius: 20px;
}
.slider.round:before {
border-radius: 50%;
}
.switch {
position: relative;
display: inline-block;
}
.switch .tooltip {
visibility: hidden;
width: 70px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 5px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%;
/* Position above the switch */
left: 290%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.switch:hover .tooltip {
visibility: visible;
opacity: 1;
}
</style> </style>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
@ -34,29 +117,36 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<?php $serialNumber = 1;foreach ($forms as $row): ?> <?php $serialNumber = 1;
foreach ($forms as $row): ?>
<tr> <tr>
<td><?php echo $serialNumber++; ?></td> <td><?php echo $serialNumber++; ?></td>
<td class="title-column"> <td class="title-column">
<?php echo $row->title; ?> <?php echo $row->title; ?>
</td> </td>
<td> <td>
<a href="<?php echo $row->response_link; ?>" target="_blank"><?php echo $row->response_link; ?></a> <a href="<?php echo $row->response_link; ?>"
target="_blank"><?php echo $row->response_link; ?></a>
</td> </td>
<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> <label class="switch">
<input type="checkbox" class="toggle-switch"
data-form-id="<?php echo $row->id; ?>" <?php echo $row->is_responsive ? 'checked' : ''; ?>>
<span class="slider round"></span>
<span
class="tooltip"><?php echo $row->is_responsive ? 'Active' : 'Disabled'; ?>
</span>
</label>
</td> </td>
<td> <td>
<a href="<?php echo base_url('form_preview/' . $row->id); ?>"> <a href="<?php echo base_url('form_preview/' . $row->id); ?>">
<i class="fas fa-eye"></i> <!-- Eye icon --> <i class="fas fa-eye"></i> <!-- Eye icon -->
</a> </a>
</td> </td>
</tr> </tr>
<?php endforeach; ?> <?php endforeach; ?>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
</div>
</div>

View File

@ -5,9 +5,40 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Response Details</title> <title>Response Details</title>
<link rel="stylesheet" href="https://bootswatch.com/3/flatly/bootstrap.min.css"> <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"> <!-- <link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/response_details_view.css"> -->
</head> </head>
<body> <body>
<style>
.question-label {
display: inline; /* Makes the <p> element behave like inline text */
margin-bottom: 11px; /* Adds space below the text */
padding: 0; /* Removes default padding */
border: none; /* Removes any border */
background: none; /* Removes any background color or box shadow */
}
.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 {
border: 1px solid #ddd; /* Adds a light grey border around the section */
border-radius: 5px; /* Optional: rounds the corners */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow effect */
padding: 15px; /* Adds padding inside the section */
background: #fff; /* Ensures background color is white for contrast */
margin-bottom: 15px; /* Optional: adds space below the section */
}
</style>
<div class="container"> <div class="container">
<div class="form-header"> <div class="form-header">
<h2><?php echo $form->title; ?></h2> <h2><?php echo $form->title; ?></h2>
@ -18,8 +49,8 @@
<?php foreach ($questions_and_answers as $question): ?> <?php foreach ($questions_and_answers as $question): ?>
<div class="form-section"> <div class="form-section">
<div class="question-section"> <div class="question-section">
<p class="form-control question-label"><?php echo $question->question_text; ?></p> <p class="form-control question-label"><?php echo $question->question_text; ?></p>
<div class="form-control" disabled><?php echo $question->answered_text; ?></div> <div class="form-control" disabled><?php echo $question->answered_text; ?></div>
</div> </div>
</div> </div>
<?php endforeach; ?> <?php endforeach; ?>

View File

@ -42,53 +42,87 @@
}); });
return isValid; return isValid;
} }
</script>
function closePopup() {
document.getElementById('popup-message').style.display = 'none';
}
// Display the popup message when the page loads
window.onload = function() {
if (document.getElementById('popup-message')) {
document.getElementById('popup-message').style.display = 'block';
}
};
</script>
<style>
.popup-message {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
}
</style>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="form-header"> <!-- <div class="form-header">
<h2><?php echo $form->title; ?></h2> <h2><?php echo $form->title; ?></h2>
<h4><?php echo $form->description; ?></h4> <h4><?php echo $form->description; ?></h4>
</div> </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; ?>"> <?php if (isset($message)): ?>
<div class="form-section"> <div id="popup-message" class="popup-message">
<?php foreach ($questions as $question): ?> <p><?php echo $message; ?></p>
<div class="question-container" data-required="<?php echo $question->is_required; ?>"> <button onclick="closePopup()">Close</button>
<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> </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> <?php else: ?>
</form> <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; ?>" data-type="<?php echo $question->type; ?>">
<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>
<?php endif; ?>
</div> </div>
</body> </body>
</html> </html>

View File

@ -105,6 +105,34 @@ $(document).ready(function() {
} }
}); });
}); });
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.toggle-switch').forEach(function(switchElement) {
switchElement.addEventListener('change', function() {
var formId = this.getAttribute('data-form-id');
var isResponsive = this.checked ? 1 : 0;
fetch(`<?php echo base_url('Publish_controller/toggle_responsive/'); ?>${formId}`, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'X-Requested-With': 'XMLHttpRequest'
},
body: `is_responsive=${isResponsive}`
})
.then(response => response.json())
.then(data => {
if (data.success) {
// Optionally, handle success
} else {
// Optionally, handle failure
}
})
.catch(error => {
console.error('Error:', error);
});
});
});
});

View File

@ -10,8 +10,8 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.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"> <link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style> <style>
@ -33,20 +33,51 @@
#submit-btn { #submit-btn {
margin-top: 20px; margin-top: 20px;
background-color: rgb(103, 58, 183); border-color: rgb(103, 58, 183); color: white;" background-color: rgb(103, 58, 183);
float: left; border-color: rgb(103, 58, 183);
color: white;
"
float: left;
clear: both; clear: both;
} }
.container{
.container {
margin-top: 10px; margin-top: 10px;
} }
.tooltip-container {
position: relative;
display: inline-block;
}
.tooltip-container .tooltip {
visibility: hidden;
width: 70px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 5px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%; /* Position above the button */
/* left: 50%; */
/* margin-left: 10px; */
opacity: 0;
transition: opacity 0.3s;
}
.tooltip-container:hover .tooltip {
visibility: visible;
opacity: 1;
}
</style> </style>
</head> </head>
<body> <body>
<script> <script>
var base_url = '<?php echo base_url(); ?>'; var base_url = '<?php echo base_url(); ?>';
</script> </script>
<nav class="navbar navbar-inverse navbar-custom"> <nav class="navbar navbar-inverse navbar-custom">
<div class="container"> <div class="container">
@ -62,26 +93,35 @@
</nav> </nav>
<div class="container"> <div class="container">
<div class="form-header"> <div class="form-header">
<button id="preview-btn" class="btn btn-info"><i class="fas fa-eye"></i></button> <div class="tooltip-container">
<h2><?php echo htmlspecialchars($title); ?></h2> <button id="preview-btn" class="btn btn-info">
<!-- <h2>Untitled Form</h2> --> <i class="fas fa-eye"></i>
</button>
<span class="tooltip">Preview</span>
</div>
<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>
<button id="submit-btn" class="btn btn-success" style="margin-left: 240px; margin-top: 20px">Submit</button>
<a id="cancel-btn" class="btn btn-danger" href="<?php echo base_url(); ?>"
style="margin-left: 8px; margin-top: 20px; display: inline-block;">Cancel</a>
<button id="add-section-btn" class="btn btn-primary">+</button>
</div> </div>
<div id="form-container"></div>
<button id="submit-btn" class="btn btn-success" style="margin-left: 240px; margin-top: 20px">Submit</button>
<a id="cancel-btn" class="btn btn-danger" href="<?php echo base_url(); ?>" style="margin-left: 8px; margin-top: 20px; display: inline-block;">Cancel</a>
</div>
<script src="<?php echo base_url('assets/js/jquery.min.js'); ?>"></script> <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/bootstrap.min.js'); ?>"></script>
<script src="<?php echo base_url('assets/js/jquery-ui.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 src="<?php echo base_url('assets/js/scripts.js'); ?>"></script>
</body> </body>
</html> </html>

View File

@ -16,6 +16,21 @@
</head> </head>
<body> <body>
<style>
.navbar-custom .navbar-brand,
.navbar-custom .navbar-nav .nav-link {
color: white !important; /* Forces the text color to be white */
text-decoration: none !important; /* Ensures no underline */
background: none !important; /* Ensures no background color */
}
.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-nav .nav-link:hover {
color: white !important; /* Keeps text color white on hover */
text-decoration: none !important; /* Ensures no underline on hover */
background: none !important; /* Ensures no background color on hover */
}
</style>
<nav class="navbar navbar-inverse" style="background-color: rgb(103, 58, 183);"> <nav class="navbar navbar-inverse" style="background-color: rgb(103, 58, 183);">
<div class="container" style="background-color: rgb(103, 58, 183);"> <div class="container" style="background-color: rgb(103, 58, 183);">

View File

@ -1,4 +1,4 @@
<?php echo form_open('users/login', ['id' => 'login-form']); ?> <?php echo form_open('users/login/'.$form_id); ?>
<div class="row"> <div class="row">
<div class="col-md-4 col-md-offset-4"> <div class="col-md-4 col-md-offset-4">
<h1 class="text-center"><?= $title; ?></h1> <h1 class="text-center"><?= $title; ?></h1>
@ -18,4 +18,4 @@
<button type="submit" class="btn btn-primary btn-block">Login</button> <button type="submit" class="btn btn-primary btn-block">Login</button>
</div> </div>
</div> </div>
<?php echo form_close(); ?> <?php echo form_close(); ?>

76
assets/css/editview.css Normal file
View File

@ -0,0 +1,76 @@
.form-header {
display: flex;
flex-direction: column;
margin-bottom: 10px;
margin-top: -56px;
}
.form-title,
.form-description {
border: none;
border-bottom: 1px solid #ccc;
margin-bottom: 10px;
padding-left: 0;
padding-right: 0;
width: 100%;
}
.form-title:focus,
.form-description:focus {
box-shadow: none;
outline: none;
border-bottom: 1px solid #007bff;
}
.option {
display: flex;
align-items: center;
margin-bottom: 5px; /* Space between options */
}
.option i.icon-transparent {
opacity: 0.5; /* Make the icon transparent */
margin-right: 10px; /* Space between icon and option box */
font-size: 10px; /* Adjust icon size here */
}
.option .form-control.option-label {
flex: 1; /* Ensure the input field takes up the remaining space */
}
.option .delete-option-icon {
margin-left: 10px; /* Space between option box and delete icon */
cursor: pointer; /* Show pointer cursor on hover */
}
.option .form-control.option-label {
width: 44%; /* Adjust the percentage as needed */
flex: none; /* Ensure it doesn't automatically adjust its size based on the parent container */
}
/* Style for the submit button */
#submit-btn {
display: block;
margin: 6px auto 30px 0; /* Top, Right, Bottom, Left Margin */
padding: 10px 20px; /* Adjust padding for button size */
background-color: rgb(103, 58, 183); /* Button color */
border-color: rgb(103, 58, 183); /* Border color */
color: white; /* Text color */
text-align: center; /* Center text inside the button */
float: left; /* Align button to the left */
}
/* Style for the container */
.container {
padding-bottom: 2px; /* Space between container content and bottom of the page */
padding-top: none;
}
/* Optional: Adding padding to body */
body {
padding-bottom: 10px; /* Space between page content and bottom of the viewport */
}
#add-section-btn {
position: relative; /* Position relative to its normal position */
left: -350px; /* Move 20px to the right from its normal position */
top: 80px; /* Move 10px down from its normal position */
}

View File

@ -1,6 +1,23 @@
body { body {
background-color: rgb(240, 235, 248); background-color: rgb(240, 235, 248);
} }
.container {
position: relative;
}
.btn-success {
position: relative;
left: 250px;
top: -10px;
margin-bottom: 20px;
}
.form-header {
/* position: absolute; */
left: 13px;
text-align: left;
}
.container { .container {
margin-top: 30px; margin-top: 30px;
} }

View File

@ -74,19 +74,7 @@ body {
flex: 1; /* Allow items to grow/shrink to fill space */ flex: 1; /* Allow items to grow/shrink to fill space */
} }
.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 { #submit-btn {
margin-top: 20px; margin-top: 20px;
@ -149,49 +137,4 @@ a.pagination-link{
border: 1px solid #3333336c; /* Darker border color for table cells */ border: 1px solid #3333336c; /* Darker border color for table cells */
} }
/* Media query for responsive design */
@media (max-width: 1200px) {
.form-header, .form-section {
width: 75%; /* Adjust width for smaller screens */
}
}
@media (max-width: 768px) {
.form-header, .form-section {
width: 90%; /* Adjust width for smaller screens */
}
.navbar-custom {
flex-direction: column; /* Stack navbar items vertically */
padding: 10px; /* Adjust padding for smaller screens */
}
.navbar-custom .navbar-brand,
.navbar-custom .navbar-nav > li > a {
font-size: 14px; /* Adjust font size for smaller screens */
padding: 10px; /* Adjust padding for smaller screens */
}
#submit-btn {
width: 100%; /* Make submit button full width */
float: none; /* Remove float */
}
}
@media (max-width: 590px) {
.form-header, .form-section {
width: 100%; /* Adjust width for smaller screens */
padding: 10px; /* Reduce padding for smaller screens */
}
.navbar-custom {
flex-direction: column; /* Stack navbar items vertically */
padding: 5px; /* Adjust padding for smaller screens */
}
.navbar-custom .navbar-brand,
.navbar-custom .navbar-nav > li > a {
font-size: 14px; /* Adjust font size for smaller screens */
padding: 10px; /* Adjust padding for smaller screens */
}
}

View File

@ -1,36 +0,0 @@
.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 */
}
.question-label {
display: inline; /* Ensure it displays inline rather than as a block */
background: none; /* Remove any background color */
margin: 0; /* Remove any margins if applied */
padding: 0; /* Remove any padding if applied */
}

View File

View File

@ -281,9 +281,7 @@ function addOption(type, container) {
icon: 'success', icon: 'success',
confirmButtonText: 'OK' confirmButtonText: 'OK'
}).then((result) => { }).then((result) => {
if (result.isConfirmed) { window.location.href = base_url;
window.location.href = base_url + 'Form_controller/index_forms';
}
}); });
} else { } else {
Swal.fire({ Swal.fire({
@ -306,7 +304,7 @@ function addOption(type, container) {
padding: 'auto', padding: 'auto',
}).then((result) => { }).then((result) => {
if (result.isConfirmed) { if (result.isConfirmed) {
window.location.href = base_url + 'Form_controller/index_forms'; window.location.href = home;
} }
}); });
console.log(error); console.log(error);