Skip to main content
C
carriec70630661
Participating Frequently
October 8, 2018
Answered

Password question

  • October 8, 2018
  • 3 replies
  • 889 views

I am trying to use a password form to connect multiple passwords to multiple pages. I’m a teacher and this is for an educational game in which students enter the correct password and it takes them to one page and later they enter another password and it takes them to another page. I’m a major beginner, too. This is a super simple website with an index that connects to the passwords page, then on to the selected page when users enter the password. I think I’ll have seven different passwords/pages total.

    This topic has been closed for replies.
    Correct answer Nancy OShea

    Below is a link to a  very low level JavaScript method.  If password is correct, script redirects user to a new HTML page.  

    Cut and Paste JavaScript-Password protected page

    3 replies

    C
    carriec70630661Author
    Participating Frequently
    October 9, 2018

    What she provided is great, but it's not quite what I'm looking for.  It may be too complicated for me to do this, but I want to try.  An example is of this website...Sarah Fincher 

    Just an empty box with a "submit" button that then connects the viewer to, in this case, a video.  I'd like it to connect the viewer/user to a new page.  Although this seems to be done through Adobe flash.  i tried to view the coding for this site, but I don't get it.  The whole PHP thing is super confusing to me.  Is there a simpler way?  Or do you have to have/use PHP any time with passwords or usernames because it has to check into the server?  I know my terminology is way off here, I don't know what I'm doing. 

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    October 9, 2018

    HTML alone can't do this.  You must use a server-side or client-side script to check & confirm the password is valid and then if it is, peform another action.  In my example, it reveals hidden content on that password protected page. 

    Nancy O'Shea— Product User & Community Expert
      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      October 8, 2018

      If your server supports PHP scripts, you can do this pretty easily without a database.

      Copy this code into a new, blank document and save as index.php.  For this to work locally, you'll need a local testing server.  If you don't have one set-up just upload to your remote server to test it.

      <!doctype html>

      <html lang="en">

      <head>

      <meta charset="utf-8">

      <title>Password Protected</title>

      <meta name="viewport" content="width=device-width, initial-scale=1">

      <meta http-equiv="X-UA-Compatible" content="IE=edge">

      <!-- Compiled and minified Bootstrap CSS-->

      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

      <style>

      .center-block {float:none}

      </style>

      </head>

      <body>

      <div class="container">

      <div class="row">

      <?php

      // Define your username and password here

      $username = "admin";

      $password = "pass123";

      if (isset($_POST['txtUsername']) != $username || $_POST['txtPassword'] != $password) {

      ?>

      <!--LOG-IN FORM-->

      <div class="col-sm-4 center-block form-group">

      <form name="form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">

      <fieldset>

      <legend>Log-In</legend>

      <p><label for="txtUsername">Username:</label>

      <br /><input type="text" class="form-control" title="Enter your Username" name="txtUsername" id="txtUsername" required/></p>

      <p><label for="txtPassword">Password:</label>

      <br /><input type="password" class="form-control" title="Enter your password" name="txtPassword" id="txtPassword" required/></p>

      <button type="submit" class="btn btn-lg btn-primary">Submit</button>

      </fieldset>

      </form>

      </div>

      </div>

      <?php

      }

      else {

      ?>

      <!--PROTECTED CONTENT IS HIDDEN UNTIL USER LOGS IN-->

      <div class="row">

      <div class="col-sm-8 center-block">

      <div class="alert-success text-center">

      <h2>Log-In Success!</h2>

      <p>You have reached a password protected area of this page. What would you like to do next?</p>

      </div>

      <!--Links to other pages-->

      <ul class="nav nav-pills">

        <li role="presentation" class="active"><a href="#">Download Files</a></li>

        <li role="presentation"><a href="#">Upload Files</a></li>

        <li role="presentation"><a href="#">Watch Videos</a></li>

        <li role="presentation"><a href="#">Play a Game</a></li>

      </ul>

      <!--/col--></div>

      <!--/row--></div>

      <?php

      }

      ?>

      <!--END PROTECTED CONTENT-->

      <!--/container--></div>

      <!--latest jQuery minified-->

      <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

      <!--Bootstrap-->

      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

      </body>

      </html>

      Repeat for other password protected pages and name them all with a .php file extension.

      Nancy O'Shea— Product User & Community Expert
        B i r n o u
        B i r n o u
        Legend
        October 8, 2018

        yep exactly, I had thought about the same approach first but I thought it would give a unique login/password for each page and therefore students could exchange it, hence the proposal of a solution based on an individual keychain instead

          Nancy OShea
          Community Expert
          Nancy OSheaCommunity Expert
          Community Expert
          October 8, 2018

          We don't know how secure this needs to be or the skill level of the person building it.   But I'm assuming they just need something simple to keep the kids engaged in the activity.

          Nancy O'Shea— Product User & Community Expert
            B i r n o u
            B i r n o u
            Legend
            October 8, 2018

            do you mean that each student will have its own set of seven password, or do you mean that each page could have 7 different password...?

            anyway it's pretty easy to handle such a configuration, but you will need some basics knowledge on code.

            you have different way to approach it... one simple one will consist of having a keychain stored on the student record property:value... the property is the password, the value is the page to be reach, you 'll then have to memorise the step in which the student is located, first page, second page and so on... you'll then have to read in the key chain the appropriate pair of property/value

            do you get the way ?

              Terms & ConditionsAccessibility statement
              Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices