Alex Tinker-Aedify Dashboard

by Alex Cowan

HTML

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Educator Dashboard</title>
  <link rel="stylesheet" href="styles.css">
</head>

<header>
  <nav class="horizontal-nav">
    <ul>
      <li><a href="#" class="active">Home</a></li>
      <li><a href="#">Your calendar</a></li>
      <li><a href="#">Admin Q&amp;A</a></li>
      <li><a href="#">About Us</a></li>
      <!-- Add more items as needed -->
    </ul>
  </nav>
</header>

<h1 style="text-align: center;">Admin Q&amp;A</h1>

<section class="qna-section">
  <h1>Q&amp;A</h1>
  <div id="search-controls">
    <div id="result-sort">
      Sort By
      <select>
        <option value="new to old">new to old</option>
        <option value="old to new">old to new</option>
      </select>
    </div>
    <div id="filter-question">
      Search By
      <select id="Answer">
        <option value="All">Answer</option>
        <option value="Answered">Answered</option>
        <option value="Unanswered">Unanswered</option>
      </select>
      <select id="Episode">
        <option value="All">Episode</option>
        <option value="Episode 1">Episode 1</option>
        <option value="Episode 2">Episode 2</option>
        <option value="Episode 3">Episode 3</option>
        <option value="Episode 4">Episode 4</option>
        <option value="Episode 5">Episode 5</option>
        <option value="Episode 6">Episode 6</option>
        <option value="Episode 7">Episode 7</option>
        <option value="Episode 8">Episode 8</option>
      </select>
    </div>
    <button type="submit" id='go-btn'>Go</button>
  </div>
  <div class="search-container">
    <input type="text" id="search" placeholder="Search...">
    <button type="submit" id="search1">Search</button>
  </div>
  <table id="faq-table">
    <tr onclick="toggleRow(this)">
      <th>ID</th>
      <th>Name</th>
      <th>Title</th>
      <th>Episode</th>
      <th>Entry time</th>
      <th>Management</th>
     ...

CSS

/* Common styles for both sections */
body {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
  color: #000000;
}

.container {
  display: flex;
}

main {
  flex: 1;
  padding: 20px;
}

h1 {
  font-size: 1.5em;
  text-align: left;
}

p {
  font-size: 1.1em;
  text-align: left;
}

/* Horizontal navigation styles */
header {
  background-color: #0205D3;
  color: white;
  text-align: left;
  width: 100%;
  padding: 10px;
}

.horizontal-nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.horizontal-nav li {
  display: inline;
  margin-right: 50px;
}

.horizontal-nav a {
  text-decoration: none;
  color: white;
  font-weight: bold;
}

.horizontal-nav a.active {
  background-color: #0205D3;
}

/* Search results styles */
.search-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 10px;
}

input[type="text"],
select {
  padding: 10px;
  width: 30%;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button[type="submit"] {
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  color: white;
  background-color: #0205D3;
  margin-left: 10px;
}

button[type="submit"]:hover{
  background-color: #ddd;
  cursor: pointer;
}

#search-controls,
#search-controls-faq {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
}

#result-sort select,
#filter-question select {
  width: 36%;
  margin-right: 10px;
}

#go-btn,
#go-btn-faq {
  margin-left: 10px;
}

#faq-table {
  border-collapse: collapse;
  width: 100%;
}

#faq-table th,
#faq-table td {
  border: 1px solid #ddd;
  padding: 6px;
  text-align: left;
}

#faq-table th {
  background-color: #f2f2f2;
}

/* Adjust spacing between buttons */
#add-faq-btn {
  margin-right: 5px;
}

#data-table iframe {
  display: block;
  margin-left: 75px;
  margin-right: auto;
  width: 75%; /* or whatever width you want */
  height: 200px; /* or whatever height you want */
  border: 1px solid #ccc; /* Optional: Adds a border around the iframe */
}

JavaScript

// Attach a click event listener to the entire document
document.addEventListener("click", function(event) {
  // Store the clicked HTML element in a constant named 'clickedElement'
  const clickedElement = event.target;

  // Call the 'logEvent' function to handle logging and any other desired behavior
  logEvent(clickedElement);
});

// Attach a keypress event listener to the entire document
document.addEventListener("keypress", function(event) {
  // Store the element where the keypress event occurred in a constant named 'clickedElement'
  const clickedElement = event.target;

  // Call the 'logEvent' function to handle logging and any other desired behavior
  logEvent(clickedElement);
});

// Function to handle the logging logic for both click and keypress events
function logEvent(target) {
  // Store the ID of the target element (where the event occurred) in a constant named 'clickedElementId'
  const clickedElementId = target.id;

  // Store the ID of the parent element of the target element in a constant named 'parentElementID'
  const parentElementID = target.parentNode.id;

  // Check if the target element has an ID and log it to the console if it does
  if (clickedElementId !== "") {
    console.log(`User CT on element with ID: ${clickedElementId}`);

  // If the target element doesn't have an ID, check if its parent element has an ID and log it to the console if it does
  } else if (parentElementID !== "") {
    console.log(`User CT on element with parent ID: ${parentElementID}`);

  // If neither the target element nor its parent have an ID, log a generic message to the console
  } else {
    console.log('User clicked on element with no ID or parent ID.');
  }
}
const { GoogleSpreadsheet } = require('google-spreadsheet');
const creds = require('./credentials.json'); // Replace with your own credentials file

async function accessSpreadsheet() {
  const doc = new GoogleSpreadsheet('1h6Cs7MYACpQ04QQciW9uqmTgRUH9LIC8UTrvIN9jH3M');

  await...