How to increase the number of tabs?
Could someone please have a look at the code below I have edited from JQuery to make a glossary of terms and tell me why the definitions for the terms after the first 9 do not show when I click on the tabs? Many thanks for any help. I also notice that the text sometimes spills over the boundary of the box which looks messy.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Tabs - Vertical Tabs functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src=" https://code.jquery.com/jquery-1.12.4.js"></script>
<script src=" https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
$( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
} );
</script>
<style>
* {padding:0; margin:0;}
html {
background:url(/img/tiles/wood.png) 0 0 repeat;
padding:15px 15px 0;
font-family:sans-serif;
font-size:14px;
}
p, h3 {
margin-bottom:15px;
}
div {
padding:10px;
width:600px;
background:#fff;
}
.tabs li {
list-style:none;
display:inline;
}
.tabs a {
padding:5px 10px;
display:inline-block;
background:#666;
color:#fff;
text-decoration:none;
}
.tabs a.active {
background:#fff;
color:#000;
}
</style>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Application</a></li>
<li><a href="#tabs-2">ASR</a></li>
<li><a href="#tabs-3">Asynchronous Communication</a></li>
<li><a href="#tabs-4">Authoring Tool</a></li>
<li><a href="#tabs-5">Avatar</a></li>
<li><a href="#tabs-6">Blended Learning</a></li>
<li><a href="#tabs-7">Blog</a></li>
<li><a href="#tabs-8">Browser</a></li>
<li><a href="#tabs-9">BYOD</a></li>
<li><a href="#tabs-10">CALL</a></li>
<li><a href="#tabs-11">Chatroom</a></li>
<li><a href="#tabs-12">Clipart</a></li>
<li><a href="#tabs-13">CMC</a></li>
<li><a href="#tabs-14">Concordancer</a></li>
<li><a href="#tabs-15">Courseware</a></li>
<li><a href="#tabs-16">CSS</a></li>
<li><a href="#tabs-17">DDL</a></li>
<li><a href="#tabs-18">Digital footprint</a></li>
<li><a href="#tabs-19">Digital Storytelling</a></li>
<li><a href="#tabs-20">Domain Name</a></li>
<li><a href="#tabs-21">E-learning</a></li>
<li><a href="#tabs-22">Feedback</a></li>
<li><a href="#tabs-23">Freeware</a></li>
<li><a href="#tabs-24">Hardware</a></li>
<li><a href="#tabs-25">Homepage</a></li>
<li><a href="#tabs-26">HTML</a></li>
<li><a href="#tabs-27">Hyperlink</a></li>
<li><a href="#tabs-28">MALL</a></li>
<li><a href="#tabs-29">Mashup</a></li>
<li><a href="#tabs-30">Mircro-blogging</a></li>
<li><a href="#tabs-31">MMORPG</a></li>
<li><a href="#tabs-32">MOOC</a></li>
<li><a href="#tabs-33">Open source</a></li>
<li><a href="#tabs-34">Podcast</a></li>
<li><a href="#tabs-35">Social network</a></li>
<li><a href="#tabs-36">UGC</a></li>
<li><a href="#tabs-37">Virtual world</a></li>
<li><a href="#tabs-38">VLE/CMS</a></li>
<li><a href="#tabs-39">Vodcast</a></li>
<li><a href="#tabs-40">Web 1.0</a></li>
<li><a href="#tabs-41">Web 2.0</a></li>
<li><a href="#tabs-42">Webquest</a></li>
<li><a href="#tabs-43">Web Feed/Syndication/RSS</a></li>
<li><a href="#tabs-44">Wiki</a></li>
</ul>
<div id="tabs-1">
<h2>App</h2>
<p><span>Application. A computer program or a suite of computer programs that performs a particular function for the user, such as a word-processor, e.g. Microsoft Word, or a range of functions, such as Microsoft Office. Commonly abbreviated to app, especially in the context of Web 2.0 and Mobile Assisted Learning (MALL) apps.</span></p>
</div>
<div id="tabs-2">
<h2>ASR</h2>
<p><span>Automatic Speech Recognition. Technology that enables the recognition and translation of spoken language into text by computers and computerized devices. Apple iphone's Siri uses ASR.</span></p>
</div>
<div id="tabs-3">
<h2>Asynchronous Communication</h2>
<p><span>Electronically mediated communication that happens asynchronously (participants post messages at different times, not synchronously). Intermittent transition of data as opposed to in a steady stream. E.g. Email, discussion forums</span></p>
</div>
<div id="tabs-4">
<h2>Authoring Tool</h2>
<p><span>Content-free software packages that allow the development of interactive learning and teaching materials without having to have a detailed knowledge of a computer Programming Language. The term may also be applied to software packages used for creating Web pages, e.g. Dreamweaver.</span></p>
</div>
<div id="tabs-5">
<h2>Avatar</h2>
<p><span>A graphical representation of a real person, such as used in virtual world or MMORPG. Participants hoose a name and a visual representation of the character that they wish to adopt as an inhabitant of world. </span></p>
</div>
<div id="tabs-6">
<h2>Blended Learning</h2>
<p><span>Combining internet-based distance learning with face-to-face tuition, or combining offline computer-based materials with more traditional materials, such as books.</span></p>
</div>
<div id="tabs-7">
<h2>Blog</h2>
<p><span>Blog is the short form of weblog. A blog is a website that is like a diary or journal as bloggers (a word for people who write on blogs) often write about their opinions, thoughts and experiences.</span></p>
</div>
<div id="tabs-8">
<h2>Browser</h2>
<p><span>Software that allows you to "surf " the Internet. Internet Explorer, Firefox, Opera, Chrome and Safari are examples of web browsers. A browser provides an easy to use interface for accessing the information on the World Wide Web.</span></p>
</div>
<div id="tabs-9">
<h2>BYOD</h2>
<p><span>Bring Your Own Device. The policy of allowing students (or employees in the working world) to bring personally owned devices such as laptops, tablets, and smart phones to their workplace to use them in their work. </span></p>
<div id="tabs-10">
<h2>CALL</h2>
<p><span><span>CALL is the abbreviation of Computer-Assisted Language Learning. It refers to how technology can be used to aid language learning.</span></span></p>
</div>
<div id="tabs-11">
<h2>Chatroom</h2>
<p><span><span>A synchronous, mainly text-based communication facility, offering a Web-based environment where people either drop into or arrange to meet and chat at specific times.</span></span></p>
</div>
<div id="tabs-12">
<h2>Clipart</h2>
<p><span><span>A collection of image files that can be embedded or inserted into Web pages, word-processed documents, PowerPoint presentations etc. Some clipart images are copyright-free or in the public domain but others may be subject to a licence fee if you wish to make them public, e.g. on a website.</span></span></p>
</div>
<div id="tabs-13">
<h2>CMC</h2>
<p><span><span>CMC is the abbreviation of Computer-Mediated Communication. It refers to how technology can be used to aid communication.</span></span></p>
</div>
<div id="tabs-14">
<h2>Concordancer</h2>
<p><span><span>Also known as a Concordance Program. A program that operates on a body of texts (a corpus) and is commonly used for compiling glossaries and dictionaries, e.g. by arranging every word in the text alphabetically or in order of frequency, together with its context. Concordance programs play an important role in language learning and teaching.</span></span></p>
</div>
<div id="tabs-15">
<h2>Courseware</h2>
<p><span><span>A set of computerised lessons, exercises, tests and reference material.</span></span></p>
</div>
<div id="tabs-16">
<h2>CSS</h2>
<p><span><span>Cascading Style Sheets are a feature of HTML that enables a range of styles for headers, body text, bullet points, links etc., to be specified for hypertext documents. This makes it possible to set up CSS file containing a library of styles that are used throughout a website, thereby facilitating consistency. If a style needs to be changed throughout a website it only needs to be changed once in the CSS file and then it will be applied automatically.</span></span></p>
</div>
<div id="tabs-17">
<h2>DDL</h2>
<p><span><span>An approach to language learning pioneered by Tim Johns, University of Birmingham, whereby learners of a foreign language gain insights into the language that they are learning by using concordance programs to locate authentic examples of language in use. In DDL the learning process is based on the learner's own discovery of rules, principles and patterns of usage in the foreign language. In other words, learning is driven by authentic language data.</span></span></p>
</div>
<div id="tabs-18">
<h2>Digital footprint</h2>
<p><span><span>The traces left when someone has interacted online. E.g. Photos, comments, videos.</span></span></p>
</div>
<div id="tabs-19">
<h2>Digital Storytelling</h2>
<p><span><span>The use of computer-based tools to tell stories by combining the art of telling stories with a variety of multimedia, including graphics, audio, video, and Web publishing.</span></span></p>
</div>
<div id="tabs-20">
<h2>Domain Name</h2>
<p><span><span>A unique name that identifies a Website (e.g. www.surrey.ac.uk). A domain name can be purchased from and registered by a domain name registration company. The latter part of the name can indicate the type of service, e.g. org = organisation, ac.uk = academic institution in the UK.</span></span></p>
</div>
<div id="tabs-21">
<h2>E-learning</h2>
<p><span><span>Electronic learning. Learning in a way that uses information and communications technology (ICT). </span></span></p>
</div>
<div id="tabs-22">
<h2>Feedback</h2>
<p><span><span>An automatic response from a computer, which may take the form of text, image, audio, video or any combination of these, to a learner's input. Input from the learner may take various forms, e.g. (i) clicking with the mouse to select an answer in a multiple-choice exercise, (ii) typing an answer at the computer keyboard, or (iii) speaking an answer into a microphone.</span></span></p>
</div>
<div id="tabs-23">
<h2>Freeware</h2>
<p><span><span>Software that is free of charge. Like most commercial software, you also will not be able to re-sell it although you might be able to redistribute it.</span></span></p>
</div>
<div id="tabs-24">
<h2>Hardware</h2>
<p><span><span>The physical elements of a computer system. Contrasted with Software.</span></span></p>
</div>
<div id="tabs-25">
<h2>Homepage</h2>
<p><span><span>This is the main Web page of a business, organisation or school, or of a personal website. From this page links are made to other pages on the same site and to external sites. Most people usually set up their Browser to open with this page when it starts up. See Website, World Wide Web. See Section 5.2, Module 3.3, headed Homepage.</span></span></p>
</div>
<div id="tabs-26">
<h2>HTML</h2>
<p><span><span>Hypertext Markup Language. The coding system used for creating pages on the World Wide Web. HTML enables the author to control how the page appears and to insert Hypertext links within one Web page or to other pages anywhere on the Web.</span></span></p>
</div>
<div id="tabs-27">
<h2>Hyperlink</h2>
<p><span><span>Hypertext link. A sequence of letters or an image that when clicked allows a website user to jump quickly to another part of the page, a different page on the same website, or to a completely different website.</span></span></p>
</div>
<div id="tabs-28">
<h2>MALL</h2>
<p><span><span>Mobile-Assisted Language Learning. Language learning that is assisted or enhanced through the use of a handheld mobile device such as smartphones, MP3 and MP4 players, PDAs and tables. Students are able to access language learning materials and communicate at any time, anywhere.</span></span></p>
</div>
<div id="tabs-29">
<h2>Mashups</h2>
<p><span><span>A web page, or web application, that uses content from more than one source to create a single new service displayed in a single graphical interface. For example, a user could combine the addresses and photographs of their library branches with a Google map to create a map mashup. It can also refer to music, where people seamlessly combine audio from one song with the vocal track from another thereby mashing them together to create something new.</span></span></p>
</div>
<div id="tabs-30">
<h2>Micro-Blogging</h2>
<p><span><span>A Web service that allows users to post brief text updates or links to media such as photos. Examples include Twitter and the status update features of social networking sites such as Facebook.</span></span></p>
</div>
<div id="tabs-31">
<h2>MMORPG</h2>
<p><span><span>Massively Multiplayer Online Role-Playing Game. An online game in which a very large number of players interact with one another within a virtual world. The player assumes the role of a character (often in a fantasy world or science-fiction world) and takes control over many of that character's actions. MMORPGs are different from single-player or small multi-player online RPGs as they involve a large number of players interacting together, and the virtual world is persistent (it continues to exist and evolve while the player is offline and away from the game).</span></span></p>
</div>
<div id="tabs-32">
<h2>MOOC</h2>
<p><span><span>Massively Open Online Course. A MOOC is an online course aimed at unlimited participation and open access via the web. They can include traditional course materials such as filmed lectures, readings and reading lists as well as interactive user forums to support community interactions among students, professors, and teaching assistants and quizzes.</span></span></p>
</div>
<div id="tabs-33">
<h2>Open source</h2>
<p><span><span>A type of software or software development in which the source code or documentation is available to the public at no cost and can be editing and reused. The open-source movement in software began as a response to the limitations of proprietary code. Examples of sites embracing open-source-like ideals are Project Gutenberg and Wikisource, both of which post many books on which the copyright has expired and are thus in the public domain, ensuring that anyone has free, unlimited access to that content.</span></span></p>
</div>
<div id="tabs-34">
<h2>Podcast</h2>
<p><span><span>An audio (or video) file that is made available online for download to a personal computer and portable music player via subscription.</span></span></p>
</div>
<div id="tabs-35">
<h2>Social Network</h2>
<p><span><span>A social networking service (SNS/social media) is an online platform that is used by people to build social networks or social relations with other people who share similar personal or career interests, activities, backgrounds or real-life connections. They are Web 2.0 internet-based applications and as such rely on user-generated content. Users interact through messaging, online forums and commenting on posts</span></span></p>
</div>
<div id="tabs-36">
<h2>UGC</h2>
<p><span><span>User-generated content. A term used to describe web content that has been created by the users. An example is YouTube as the content is not produced by YouTube but by its users.</span></span></p>
</div>
<div id="tabs-37">
<h2>Virtual world</h2>
<p><span><span>A computer-based simulated environment populated by many users who can create a personal avatar, and simultaneously and independently explore the virtual world, participate in its activities and communicate with others. The avatars can be textual, two or three-dimensional graphical representations, or live video avatars with auditory and touch sensations. An example is Second Life. </span></span></p>
</div>
<div id="tabs-38">
<h2>VLE/CMS</h2>
<p><span><span>Virtual Learning Environment/Course Management System. A system for delivering learning materials to students via the web. They can include assessment, student tracking, collaboration and communication tools. Examples are SurreyLearn, Moodle, Blackboard</span></span></p>
<div id="tabs-39">
<h2>Vodcast</h2>
<p><span><span>A video version of a podcast. That is a video file that is made available online for download to a personal computer and portable music player via subscription.</span></span></p>
</div>
<div id="tabs-40">
<h2>Web 1.0</h2>
<p><span><span>Web 1.0 refers to the state of the World wide web in the period between 1994 and 2004 when internet sites tended to be read-only (readers could not contribute to them o interact using them).</span></span></p>
</div>
<div id="tabs-41">
<h2>Web 2.0</h2>
<p><span><span>Web 2.0 refers to the stage of Web development (post 2004) that allows for user-generated content and interaction. Examples of web 2.0 applications include blogs, wikis, social networking sites, video sharing sites. </span></span></p>
</div>
<div id="tabs-42">
<h2>Webquest</h2>
<p><span><span>A task-based collaborative activity where students use web-based resources to access information and resources to complete a project.</span></span></p>
</div>
<div id="tabs-43">
<h2>Web Feed/Syndication/RSS</h2>
<p><span><span>A form of syndication in which content is made available from one website to other sites. Web feeds are often provide either summaries or full renditions of a website's recently added content, and users can subscribe to the web feed. Making a collection of web feeds accessible in one spot is known as aggregation, which is performed by a news aggregator. RSS (Rich Site Summary/Really Simlple Syndication) is another term for this</span></span></p>
</div>
<div id="tabs-44">
<h2>Wiki</h2>
<p><span><span>A collaborative website that can be edited by its users. The most famous example of a wiki is Wikipedia - http://www.wikipedia.org </span></span></p>
</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Tabs - Vertical Tabs functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src=" https://code.jquery.com/jquery-1.12.4.js"></script>
<script src=" https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
$( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
} );
</script>
<style>
* {padding:0; margin:0;}
html {
background:url(/img/tiles/wood.png) 0 0 repeat;
padding:15px 15px 0;
font-family:sans-serif;
font-size:14px;
}
p, h3 {
margin-bottom:15px;
}
div {
padding:10px;
width:600px;
background:#fff;
}
.tabs li {
list-style:none;
display:inline;
}
.tabs a {
padding:5px 10px;
display:inline-block;
background:#666;
color:#fff;
text-decoration:none;
}
.tabs a.active {
background:#fff;
color:#000;
}
</style>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Application</a></li>
<li><a href="#tabs-2">ASR</a></li>
<li><a href="#tabs-3">Asynchronous Communication</a></li>
<li><a href="#tabs-4">Authoring Tool</a></li>
<li><a href="#tabs-5">Avatar</a></li>
<li><a href="#tabs-6">Blended Learning</a></li>
<li><a href="#tabs-7">Blog</a></li>
<li><a href="#tabs-8">Browser</a></li>
<li><a href="#tabs-9">BYOD</a></li>
<li><a href="#tabs-10">CALL</a></li>
<li><a href="#tabs-11">Chatroom</a></li>
<li><a href="#tabs-12">Clipart</a></li>
<li><a href="#tabs-13">CMC</a></li>
<li><a href="#tabs-14">Concordancer</a></li>
<li><a href="#tabs-15">Courseware</a></li>
<li><a href="#tabs-16">CSS</a></li>
<li><a href="#tabs-17">DDL</a></li>
<li><a href="#tabs-18">Digital footprint</a></li>
<li><a href="#tabs-19">Digital Storytelling</a></li>
<li><a href="#tabs-20">Domain Name</a></li>
<li><a href="#tabs-21">E-learning</a></li>
<li><a href="#tabs-22">Feedback</a></li>
<li><a href="#tabs-23">Freeware</a></li>
<li><a href="#tabs-24">Hardware</a></li>
<li><a href="#tabs-25">Homepage</a></li>
<li><a href="#tabs-26">HTML</a></li>
<li><a href="#tabs-27">Hyperlink</a></li>
<li><a href="#tabs-28">MALL</a></li>
<li><a href="#tabs-29">Mashup</a></li>
<li><a href="#tabs-30">Mircro-blogging</a></li>
<li><a href="#tabs-31">MMORPG</a></li>
<li><a href="#tabs-32">MOOC</a></li>
<li><a href="#tabs-33">Open source</a></li>
<li><a href="#tabs-34">Podcast</a></li>
<li><a href="#tabs-35">Social network</a></li>
<li><a href="#tabs-36">UGC</a></li>
<li><a href="#tabs-37">Virtual world</a></li>
<li><a href="#tabs-38">VLE/CMS</a></li>
<li><a href="#tabs-39">Vodcast</a></li>
<li><a href="#tabs-40">Web 1.0</a></li>
<li><a href="#tabs-41">Web 2.0</a></li>
<li><a href="#tabs-42">Webquest</a></li>
<li><a href="#tabs-43">Web Feed/Syndication/RSS</a></li>
<li><a href="#tabs-44">Wiki</a></li>
</ul>
<div id="tabs-1">
<h2>App</h2>
<p><span>Application. A computer program or a suite of computer programs that performs a particular function for the user, such as a word-processor, e.g. Microsoft Word, or a range of functions, such as Microsoft Office. Commonly abbreviated to app, especially in the context of Web 2.0 and Mobile Assisted Learning (MALL) apps.</span></p>
</div>
<div id="tabs-2">
<h2>ASR</h2>
<p><span>Automatic Speech Recognition. Technology that enables the recognition and translation of spoken language into text by computers and computerized devices. Apple iphone's Siri uses ASR.</span></p>
</div>
<div id="tabs-3">
<h2>Asynchronous Communication</h2>
<p><span>Electronically mediated communication that happens asynchronously (participants post messages at different times, not synchronously). Intermittent transition of data as opposed to in a steady stream. E.g. Email, discussion forums</span></p>
</div>
<div id="tabs-4">
<h2>Authoring Tool</h2>
<p><span>Content-free software packages that allow the development of interactive learning and teaching materials without having to have a detailed knowledge of a computer Programming Language. The term may also be applied to software packages used for creating Web pages, e.g. Dreamweaver.</span></p>
</div>
<div id="tabs-5">
<h2>Avatar</h2>
<p><span>A graphical representation of a real person, such as used in virtual world or MMORPG. Participants hoose a name and a visual representation of the character that they wish to adopt as an inhabitant of world. </span></p>
</div>
<div id="tabs-6">
<h2>Blended Learning</h2>
<p><span>Combining internet-based distance learning with face-to-face tuition, or combining offline computer-based materials with more traditional materials, such as books.</span></p>
</div>
<div id="tabs-7">
<h2>Blog</h2>
<p><span>Blog is the short form of weblog. A blog is a website that is like a diary or journal as bloggers (a word for people who write on blogs) often write about their opinions, thoughts and experiences.</span></p>
</div>
<div id="tabs-8">
<h2>Browser</h2>
<p><span>Software that allows you to "surf " the Internet. Internet Explorer, Firefox, Opera, Chrome and Safari are examples of web browsers. A browser provides an easy to use interface for accessing the information on the World Wide Web.</span></p>
</div>
<div id="tabs-9">
<h2>BYOD</h2>
<p><span>Bring Your Own Device. The policy of allowing students (or employees in the working world) to bring personally owned devices such as laptops, tablets, and smart phones to their workplace to use them in their work. </span></p>
<div id="tabs-10">
<h2>CALL</h2>
<p><span><span>CALL is the abbreviation of Computer-Assisted Language Learning. It refers to how technology can be used to aid language learning.</span></span></p>
</div>
<div id="tabs-11">
<h2>Chatroom</h2>
<p><span><span>A synchronous, mainly text-based communication facility, offering a Web-based environment where people either drop into or arrange to meet and chat at specific times.</span></span></p>
</div>
<div id="tabs-12">
<h2>Clipart</h2>
<p><span><span>A collection of image files that can be embedded or inserted into Web pages, word-processed documents, PowerPoint presentations etc. Some clipart images are copyright-free or in the public domain but others may be subject to a licence fee if you wish to make them public, e.g. on a website.</span></span></p>
</div>
<div id="tabs-13">
<h2>CMC</h2>
<p><span><span>CMC is the abbreviation of Computer-Mediated Communication. It refers to how technology can be used to aid communication.</span></span></p>
</div>
<div id="tabs-14">
<h2>Concordancer</h2>
<p><span><span>Also known as a Concordance Program. A program that operates on a body of texts (a corpus) and is commonly used for compiling glossaries and dictionaries, e.g. by arranging every word in the text alphabetically or in order of frequency, together with its context. Concordance programs play an important role in language learning and teaching.</span></span></p>
</div>
<div id="tabs-15">
<h2>Courseware</h2>
<p><span><span>A set of computerised lessons, exercises, tests and reference material.</span></span></p>
</div>
<div id="tabs-16">
<h2>CSS</h2>
<p><span><span>Cascading Style Sheets are a feature of HTML that enables a range of styles for headers, body text, bullet points, links etc., to be specified for hypertext documents. This makes it possible to set up CSS file containing a library of styles that are used throughout a website, thereby facilitating consistency. If a style needs to be changed throughout a website it only needs to be changed once in the CSS file and then it will be applied automatically.</span></span></p>
</div>
<div id="tabs-17">
<h2>DDL</h2>
<p><span><span>An approach to language learning pioneered by Tim Johns, University of Birmingham, whereby learners of a foreign language gain insights into the language that they are learning by using concordance programs to locate authentic examples of language in use. In DDL the learning process is based on the learner's own discovery of rules, principles and patterns of usage in the foreign language. In other words, learning is driven by authentic language data.</span></span></p>
</div>
<div id="tabs-18">
<h2>Digital footprint</h2>
<p><span><span>The traces left when someone has interacted online. E.g. Photos, comments, videos.</span></span></p>
</div>
<div id="tabs-19">
<h2>Digital Storytelling</h2>
<p><span><span>The use of computer-based tools to tell stories by combining the art of telling stories with a variety of multimedia, including graphics, audio, video, and Web publishing.</span></span></p>
</div>
<div id="tabs-20">
<h2>Domain Name</h2>
<p><span><span>A unique name that identifies a Website (e.g. www.surrey.ac.uk). A domain name can be purchased from and registered by a domain name registration company. The latter part of the name can indicate the type of service, e.g. org = organisation, ac.uk = academic institution in the UK.</span></span></p>
</div>
<div id="tabs-21">
<h2>E-learning</h2>
<p><span><span>Electronic learning. Learning in a way that uses information and communications technology (ICT). </span></span></p>
</div>
<div id="tabs-22">
<h2>Feedback</h2>
<p><span><span>An automatic response from a computer, which may take the form of text, image, audio, video or any combination of these, to a learner's input. Input from the learner may take various forms, e.g. (i) clicking with the mouse to select an answer in a multiple-choice exercise, (ii) typing an answer at the computer keyboard, or (iii) speaking an answer into a microphone.</span></span></p>
</div>
<div id="tabs-23">
<h2>Freeware</h2>
<p><span><span>Software that is free of charge. Like most commercial software, you also will not be able to re-sell it although you might be able to redistribute it.</span></span></p>
</div>
<div id="tabs-24">
<h2>Hardware</h2>
<p><span><span>The physical elements of a computer system. Contrasted with Software.</span></span></p>
</div>
<div id="tabs-25">
<h2>Homepage</h2>
<p><span><span>This is the main Web page of a business, organisation or school, or of a personal website. From this page links are made to other pages on the same site and to external sites. Most people usually set up their Browser to open with this page when it starts up. See Website, World Wide Web. See Section 5.2, Module 3.3, headed Homepage.</span></span></p>
</div>
<div id="tabs-26">
<h2>HTML</h2>
<p><span><span>Hypertext Markup Language. The coding system used for creating pages on the World Wide Web. HTML enables the author to control how the page appears and to insert Hypertext links within one Web page or to other pages anywhere on the Web.</span></span></p>
</div>
<div id="tabs-27">
<h2>Hyperlink</h2>
<p><span><span>Hypertext link. A sequence of letters or an image that when clicked allows a website user to jump quickly to another part of the page, a different page on the same website, or to a completely different website.</span></span></p>
</div>
<div id="tabs-28">
<h2>MALL</h2>
<p><span><span>Mobile-Assisted Language Learning. Language learning that is assisted or enhanced through the use of a handheld mobile device such as smartphones, MP3 and MP4 players, PDAs and tables. Students are able to access language learning materials and communicate at any time, anywhere.</span></span></p>
</div>
<div id="tabs-29">
<h2>Mashups</h2>
<p><span><span>A web page, or web application, that uses content from more than one source to create a single new service displayed in a single graphical interface. For example, a user could combine the addresses and photographs of their library branches with a Google map to create a map mashup. It can also refer to music, where people seamlessly combine audio from one song with the vocal track from another thereby mashing them together to create something new.</span></span></p>
</div>
<div id="tabs-30">
<h2>Micro-Blogging</h2>
<p><span><span>A Web service that allows users to post brief text updates or links to media such as photos. Examples include Twitter and the status update features of social networking sites such as Facebook.</span></span></p>
</div>
<div id="tabs-31">
<h2>MMORPG</h2>
<p><span><span>Massively Multiplayer Online Role-Playing Game. An online game in which a very large number of players interact with one another within a virtual world. The player assumes the role of a character (often in a fantasy world or science-fiction world) and takes control over many of that character's actions. MMORPGs are different from single-player or small multi-player online RPGs as they involve a large number of players interacting together, and the virtual world is persistent (it continues to exist and evolve while the player is offline and away from the game).</span></span></p>
</div>
<div id="tabs-32">
<h2>MOOC</h2>
<p><span><span>Massively Open Online Course. A MOOC is an online course aimed at unlimited participation and open access via the web. They can include traditional course materials such as filmed lectures, readings and reading lists as well as interactive user forums to support community interactions among students, professors, and teaching assistants and quizzes.</span></span></p>
</div>
<div id="tabs-33">
<h2>Open source</h2>
<p><span><span>A type of software or software development in which the source code or documentation is available to the public at no cost and can be editing and reused. The open-source movement in software began as a response to the limitations of proprietary code. Examples of sites embracing open-source-like ideals are Project Gutenberg and Wikisource, both of which post many books on which the copyright has expired and are thus in the public domain, ensuring that anyone has free, unlimited access to that content.</span></span></p>
</div>
<div id="tabs-34">
<h2>Podcast</h2>
<p><span><span>An audio (or video) file that is made available online for download to a personal computer and portable music player via subscription.</span></span></p>
</div>
<div id="tabs-35">
<h2>Social Network</h2>
<p><span><span>A social networking service (SNS/social media) is an online platform that is used by people to build social networks or social relations with other people who share similar personal or career interests, activities, backgrounds or real-life connections. They are Web 2.0 internet-based applications and as such rely on user-generated content. Users interact through messaging, online forums and commenting on posts</span></span></p>
</div>
<div id="tabs-36">
<h2>UGC</h2>
<p><span><span>User-generated content. A term used to describe web content that has been created by the users. An example is YouTube as the content is not produced by YouTube but by its users.</span></span></p>
</div>
<div id="tabs-37">
<h2>Virtual world</h2>
<p><span><span>A computer-based simulated environment populated by many users who can create a personal avatar, and simultaneously and independently explore the virtual world, participate in its activities and communicate with others. The avatars can be textual, two or three-dimensional graphical representations, or live video avatars with auditory and touch sensations. An example is Second Life. </span></span></p>
</div>
<div id="tabs-38">
<h2>VLE/CMS</h2>
<p><span><span>Virtual Learning Environment/Course Management System. A system for delivering learning materials to students via the web. They can include assessment, student tracking, collaboration and communication tools. Examples are SurreyLearn, Moodle, Blackboard</span></span></p>
<div id="tabs-39">
<h2>Vodcast</h2>
<p><span><span>A video version of a podcast. That is a video file that is made available online for download to a personal computer and portable music player via subscription.</span></span></p>
</div>
<div id="tabs-40">
<h2>Web 1.0</h2>
<p><span><span>Web 1.0 refers to the state of the World wide web in the period between 1994 and 2004 when internet sites tended to be read-only (readers could not contribute to them o interact using them).</span></span></p>
</div>
<div id="tabs-41">
<h2>Web 2.0</h2>
<p><span><span>Web 2.0 refers to the stage of Web development (post 2004) that allows for user-generated content and interaction. Examples of web 2.0 applications include blogs, wikis, social networking sites, video sharing sites. </span></span></p>
</div>
<div id="tabs-42">
<h2>Webquest</h2>
<p><span><span>A task-based collaborative activity where students use web-based resources to access information and resources to complete a project.</span></span></p>
</div>
<div id="tabs-43">
<h2>Web Feed/Syndication/RSS</h2>
<p><span><span>A form of syndication in which content is made available from one website to other sites. Web feeds are often provide either summaries or full renditions of a website's recently added content, and users can subscribe to the web feed. Making a collection of web feeds accessible in one spot is known as aggregation, which is performed by a news aggregator. RSS (Rich Site Summary/Really Simlple Syndication) is another term for this</span></span></p>
</div>
<div id="tabs-44">
<h2>Wiki</h2>
<p><span><span>A collaborative website that can be edited by its users. The most famous example of a wiki is Wikipedia - http://www.wikipedia.org </span></span></p>
</div>
</div>
</div>
</div>
</body>
</html>
Topic Participants
c.e.rowcroft
jakecigar