Results 1 to 13 of 13

Thread: How to replicate a webpage

  1. #1
    Join Date
    Sep 2017

    How to replicate a webpage

    I am not a website developer. I wish I were.
    I teach English online.
    I provide my students with quizzes, in the form of a MS Word or MS Excel document (I send the files to the students via Skype of email). I currently do not have a website.

    I would like to know how one website created their quizzes. The design, layout and functions are perfect and I would like to get the code or the module/template so I could create my own .htm (I think) quizzes and files.

    I hope my non-technical explanation is understandable

    Here is the web page/quiz that I referred to:


    Thank you in advance... Have a good day...

  2. #2
    Join Date
    Mar 2007
    Sounds like you need a CMS where your main focus is on the content of the site rather than building a site from scratch.

    Your first port of call is a web host and search for a domain name that you want to use (if available) and then using their control panel, install the preinstalled CMS's and play with them.

    A really cheap hosting plan on a Linux server including domain name, all you can eat traffic, subdomains, databases, web space, traffic is what you aim for, too many companies cap websites and thats how you incur additional fees easily and especially when someone hotlinks to your content. So you want a web host that offers an all in one package and one in your own country so that you have your consumer rights and some comeback if things go sideways.

    My web host is very cheap, with domain name and all inclusive, its about 2.50 a month.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  3. #3
    Join Date
    Jan 2017
    Coimbatore, India
    Hello Richard,
    The thing you are looking for is a LMS (Learning management system). There are many LMS out there, with lot many features. Moodle is the most famous. Hope this will help you get started.

    Once you decided on one, like the above moderator has explained, you need to purchase a domain and hosting.

  4. #4
    Join Date
    Sep 2006
    new york
    ctrl-u view source to see how page is constructed

    that https://moodle.org/ is interesting
    Last edited by auntnini; 09-12-2017 at 01:12 PM.

  5. #5
    Join Date
    Sep 2017
    THANK YOU ... Super Moderator, evoluer, and auntnini

    I should have said that I was hoping that I could create my quizzes with the same layout, and dropdown answers, and automatic "correct or incorrect" display.
    I was hoping that it could be done using a template or a program that functions the same way as the quiz in the website exmpe, but without running on a website (I don't have, nor do I need to have a website).
    I was hoping I could send the files (the quizzes) to my students and they would open the quizzes in their default browser.

    Please excuse my poor descriptions... I simply don't know the proper technical terminology.


  6. #6
    Join Date
    Mar 2007
    So how are people able to complete these quizzes and tests without cheating and looking at the code?
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  7. #7
    Join Date
    Sep 2017
    Quote Originally Posted by \\.\ View Post
    So how are people able to complete these quizzes and tests without cheating and looking at the code?
    Super M... You've asked a very reasonable question.
    First, most of my students are professionals, but not website professionals like you, so they wouldnot know where to find the answer in the code.
    Second, they need to learn English for their work, so they do not benefit if they cheat. And the tests are not scored, they are simply for practising what they have learned.
    I thought (and I may be wrong) that the quiz could function in the same way that an excel file could function by showing the answer choices in a dropdown menu and also identifying correct and incorrect answers. I thought this could be done in an HTM or HTML file without the need of a website.
    Thank you for your support up to this point...

  8. #8
    Join Date
    Dec 2012
    I thought this could be done in an HTM or HTML file without the need of a website.
    Yes, this can be done. However, I don't know a tool that supports it. Creating such HTML file requires some coding skills. One could make the page configurable, so that you only need to fill in a configuation, e. g. in JSON format. Or, to make it more user friendly, one could create a form where you can enter the parts of the sentence and the options.

  9. #9
    Join Date
    Dec 2012
    PS: Such configuration could look like this:
            // Modify this configuration
            var data = [
                    firstpart: "Dan enjoys ",
                    options: ["reading", "to read"],
                    lastpart: " science fiction.",
                    correct: 1
                    firstpart: "Cheryl suggested ",
                    options: ["seeing", "to see"],
                    lastpart: " a movie after work.",
                    correct: 2
            // Do not modify below this point
    Base on this the complete HTML page including the checking procedure could be created automatically.

  10. #10
    Join Date
    Sep 2017

    Due to my lack of coding skills, I would need something like you described, e.g., "... a form where you can enter the parts of the sentence and the options."
    I was hoping there might be a template or little program (or executable file ?) in which I could simply insert my questions, the multiple choice answers, and the correct answers.
    Thank you for your helpful information.

  11. #11
    Join Date
    Dec 2012
    Made a small and simple mockup of such editor. Check if you like it:
    <!doctype html>
            .editable {
                border: 1px solid grey;
            #preview {
                border: 2px solid grey;
                border-radius: 5px;
                min-height: 20px;
            h4 {
                margin: 2px;
        <div id="preview"></div>
            Leading part of sentence:
            <span class="editable" id="leading" contentEditable>Enter text here</span>
            <input class="opt" id="option1" />First option<br />
            <input class="opt" id="option2" />Second option<br />
            Trailing part of sentence:
            <span class="editable" id="trailing" contentEditable>Enter text here</span>
        <button id="append">Append</button>
            append.addEventListener("click", function () {
                var cont = document.createElement("p");
                var ldng = document.createElement("span");
                ldng.innerHTML = leading.innerHTML;
                var trlng = document.createElement("span");
                trlng.innerHTML = trailing.innerHTML;
                var sel = document.createElement("select");
                var opt1 = document.createElement("option");
                opt1.innerHTML = option1.value;
                var opt2 = document.createElement("option");
                opt2.innerHTML = option2.value;

  12. #12
    Join Date
    Sep 2017

    You have gone above and beyond the call of duty... in other words, I truly appreciate the code you've written. It was very kind of you to take your time to provide this valuable help.
    Unfortunately, I'm not sure what to do with the code you've written.
    But I will try to find out how to use your good work.
    Again, I thank you very much...

  13. #13
    Join Date
    Dec 2012
    Hallo Richard,
    you just need to place the code into a textfile and give it the extension ".html". Check out the attachment. I hope that the handling is self explaining. Enter the leading an trailing part of the sentence and the options. By checking a button at the left you define which option is correct. Then press append and the sentence will be appended to the preview area. When you've finished you can save the quiz to disk.

    Last edited by Sempervivum; 09-25-2017 at 03:44 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center



X vBulletin 4.2.2 Debug Information

  • Page Generation 0.11643 seconds
  • Memory Usage 2,986KB
  • Queries Executed 15 (?)
More Information
Template Usage (34):
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (2)bbcode_code
  • (2)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (13)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (13)postbit
  • (13)postbit_onlinestatus
  • (13)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (71):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • fetch_postattach_query
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates